fix(cli-service): make devBaseUrl work properly in serve command

[jkzing]

This PR includes:

1. Use devBaseUrl as process.env.BASE_URL in development mode.

Previously favicon url would be incorrect with:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

2. Make webpack-dev-server use devBaseUrl as publicPath

Previously devBaseUrl only changes publicPath in webpack config, which is not enough because the dev server is not serving files in that way...

There still is a issue here, that if we have a vue.config.js like:

module.exports = {
  devBaseUrl: '/foo/'
}

When accessing localhost:8080 without any additional path, historyApiFallback won't be triggered. So that dev server will act like been accessing localhost:8080/index.html, which is the original file (public/index.html) because dev server is serving public folder with contentBase ...

[jkzing]

🤔, I want to ask why do we need devBaseUrl at all? User can decide what the baseUrl is in config file like:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? 'https://some.cdn.com/'
    : '/'
}

[yyx990803]

@jkzing that's a good point - I've merged the two options in a9e1286

[adinvadim]

But how can I set devBaseUrl from plugin generator?

api.extendPackage({
  baseUrl: process.env.NODE_ENV === 'production' ? '/static' : '/',
})

now this code isn't the same as this:

api.extendPackage({
  baseUrl: '/static',
  devBaseUrl: '/',
})

[jkzing]

@adinvadim api.extendPackage is to extend the package.json, in which process.env is not available.

[adinvadim]

@jkzing
Oops, I mean

api.extendPackage({
  vue: {
    baseUrl: process.env.NODE_ENV === 'production' ? '/static' : '/',
  }
})

It's to extend the vue.config.js.

This code will execute only on plugin generating. That's why we get in vue.config.js

...
baseUrl: '/'