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

Author: jkzing

packages/@vue/cli-service/lib/commands/serve.js

@@ -29,6 +29,7 @@ module.exports = (api, options) => {
     // are running it in a mode with a production env, e.g. in E2E tests.
     const isProduction = process.env.NODE_ENV === 'production'
 
+    const path = require('path')
     const chalk = require('chalk')
     const webpack = require('webpack')
     const WebpackDevServer = require('webpack-dev-server')
@@ -63,7 +64,10 @@ module.exports = (api, options) => {
     if (!isProduction) {
       const devClients = [
         // dev server client
-        require.resolve(`webpack-dev-server/client`),
+        require.resolve(`webpack-dev-server/client`) +
+          // fix webpack-dev-server socket url to /sockjs-node
+          // in case it uses options.devBaseUrl
+          '?/sockjs-node',
         // hmr client
         require.resolve(projectDevServerOptions.hotOnly
           ? 'webpack/hot/only-dev-server'
@@ -102,14 +106,17 @@ module.exports = (api, options) => {
     const server = new WebpackDevServer(compiler, Object.assign({
       clientLogLevel: 'none',
       historyApiFallback: {
-        disableDotRule: true
+        disableDotRule: true,
+        rewrites: [
+          { from: /./, to: path.posix.join(options.devBaseUrl, 'index.html') }
+        ]
       },
       contentBase: api.resolve('public'),
       watchContentBase: !isProduction,
       hot: !isProduction,
       quiet: true,
       compress: isProduction,
-      publicPath: '/',
+      publicPath: options.devBaseUrl,
       overlay: isProduction // TODO disable this
         ? false
         : { warnings: false, errors: true }

packages/@vue/cli-service/lib/config/app.js

@@ -29,7 +29,7 @@ module.exports = (api, options) => {
             files: assets,
             options: pluginOptions
           }
-        }, resolveClientEnv(options.baseUrl, true /* raw */))
+        }, resolveClientEnv(options, true /* raw */))
       }
     }
 

packages/@vue/cli-service/lib/config/base.js

@@ -147,7 +147,7 @@ module.exports = (api, options) => {
     webpackConfig
       .plugin('define')
         .use(require('webpack/lib/DefinePlugin'), [
-          resolveClientEnv(options.baseUrl)
+          resolveClientEnv(options)
         ])
 
     webpackConfig

packages/@vue/cli-service/lib/config/dev.js

@@ -7,7 +7,7 @@ module.exports = (api, options) => {
       webpackConfig
         .devtool('cheap-module-eval-source-map')
         .output
-          .publicPath(options.devBaseUrl || '/')
+          .publicPath(options.devBaseUrl)
 
       webpackConfig
         .plugin('hmr')

packages/@vue/cli-service/lib/options.js

@@ -48,6 +48,9 @@ exports.defaults = () => ({
   // project deployment base
   baseUrl: '/',
 
+  // baseUrl, but for the dev server.
+  devBaseUrl: '/',
+
   // where to output built files
   outputDir: 'dist',
 

packages/@vue/cli-service/lib/util/resolveClientEnv.js

@@ -1,13 +1,14 @@
 const prefixRE = /^VUE_APP_/
 
-module.exports = function resolveClientEnv (publicPath, raw) {
+module.exports = function resolveClientEnv (options, raw) {
+  const isProd = process.env.NODE_ENV === 'production'
   const env = {}
   Object.keys(process.env).forEach(key => {
     if (prefixRE.test(key) || key === 'NODE_ENV') {
       env[key] = process.env[key]
     }
   })
-  env.BASE_URL = publicPath
+  env.BASE_URL = isProd ? options.baseUrl : options.devBaseUrl
 
   if (raw) {
     return env