Duplicate tabs opened when running 'yarn run serve'

[kuretru]

Version

3.8.2

Reproduction link

https://github.com/kuretru/Bug-demo

Environment info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 12.3.1 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.0
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. yarn install
2. yarn run serve
3. Chrome open a tab -> "http://localhost:8080/", this is wrong
4. Chrome open another tab -> "http://localhost:8080/admin/", this is right

What is expected?

Chrome only open "http://localhost:8080/admin/" .

What is actually happening?

Chrome open two tabs, and one is wrong.

---

• You can see an error in the console.

11% building 9/16 modules 7 active .../client/utils/getCurrentScriptSource.jsURIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'

Remove 'publicPath' in vue.config.js can fix this, but two tabs still appeared.

• I think npm run serve时浏览器自动打开两个标签 #4067 is also had this problem, but is was closed.

[flyjin]

I have this problem, too.

[jiangxiaoxin]

I meet this same problem , too.

In vue-cli 3.0, it uses webpack-dev-server and this module will call a method named runOpen to open a new browser tag.

'use strict'

const open = require('opn')

function runOpen(uri, options, log) {
  let openOptions = {}
  let openMessage = 'Unable to open browser'

  if (typeof options.open === 'string') {
    openOptions = { app: options.open }
    openMessage += `: ${options.open}`
  }
  return open(`${uri}${options.openPage || ''}`, openOptions).catch(() => {
    log.warn(`${openMessage}. If you are running in a headless environment, please do not use the --open flag`)
  })
}

module.exports = runOpen

In addition to this, vue-cli 3.0 includes another module named cli-service. In serve.js, it will check whether this is the first time to compile the project. If isFirstCompile is true, then it will call a method named openBrowser in cli-shared-utils to open another browser tag.

/**
 * Reads the BROWSER environment variable and decides what to do with it. Returns
 * true if it opened a browser or ran a node.js script, otherwise false.
 */
exports.openBrowser = function(url) {
  const { action, value } = getBrowserEnv()
  switch (action) {
    case Actions.NONE:
      // Special case: BROWSER="none" will prevent opening completely.
      return false
    case Actions.SCRIPT:
      return executeNodeScript(value, url)
    case Actions.BROWSER:
      return startBrowserProcess(value, url)
    default:
      throw new Error('Not implemented.')
  }
}

function startBrowserProcess(browser, url) {
  // If we're on OS X, the user hasn't specifically
  // requested a different browser, we can try opening
  // Chrome with AppleScript. This lets us reuse an
  // existing tab when possible instead of creating a new one.
  const shouldTryOpenChromeWithAppleScript = process.platform === 'darwin' && (typeof browser !== 'string' || browser === OSX_CHROME)

  if (shouldTryOpenChromeWithAppleScript) {
    try {
      // Try our best to reuse existing tab
      // on OS X Google Chrome with AppleScript
      execSync('ps cax | grep "Google Chrome"')
      execSync('osascript openChrome.applescript "' + encodeURI(url) + '"', {
        cwd: __dirname,
        stdio: 'ignore',
      })
      return true
    } catch (err) {
      // Ignore errors.
    }
  }

  // Another special case: on OS X, check if BROWSER has been set to "open".
  // In this case, instead of passing the string `open` to `open` function (which won't work),
  // just ignore it (thus ensuring the intended behavior, i.e. opening the system browser):
  // https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
  if (process.platform === 'darwin' && browser === 'open') {
    browser = undefined
  }

  // Fallback to open
  // (It will always open new tab)
  try {
    var options = { app: browser }
    open(url, options).catch(() => {}) // Prevent `unhandledRejection` error.
    return true
  } catch (err) {
    return false
  }
}

Does vue make a mistake ?@LinusBorg

[SecMao]

I have got the same problem under Win 10 after I update cli version from 3.4.1 to 3.8.0. What is weird is that problem is not fixed when I revert the update

[haoqunjiang]

Fixed in 3.8.3