feat: respect baseUrl during development

BREAKING CHANGE: `devBaseUrl` option has been removed. `baseUrl` now works for both development and production. To use different paths for prod/dev, use conditional values based on `process.env.NODE_ENV` in `vue.config.js`.
vuejs · May 30, 2018 · a9e1286 · a9e1286
1 parent 04600e6
commit a9e1286
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 24 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -13,11 +13,6 @@ module.exports = {
   // then change this to '/my-app/'
   baseUrl: '/',
 
-  // baseUrl, but for the dev server.
-  // you'll only need this if you need to serve your dev server under
-  // a specific sub-path in order to work with your dev setup.
-  devBaseUrl: '/',
-
   // where to output built files
   outputDir: 'dist',
 

diff --git a/packages/@vue/cli-service/lib/commands/serve.js b/packages/@vue/cli-service/lib/commands/serve.js
@@ -64,10 +64,7 @@ module.exports = (api, options) => {
     if (!isProduction) {
       const devClients = [
         // 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',
+        require.resolve(`webpack-dev-server/client`) + '?/sockjs-node',
         // hmr client
         require.resolve(projectDevServerOptions.hotOnly
           ? 'webpack/hot/only-dev-server'
@@ -94,7 +91,8 @@ module.exports = (api, options) => {
     const urls = prepareURLs(
       useHttps ? 'https' : 'http',
       host,
-      port
+      port,
+      options.baseUrl
     )
 
     const proxySettings = prepareProxy(
@@ -108,15 +106,15 @@ module.exports = (api, options) => {
       historyApiFallback: {
         disableDotRule: true,
         rewrites: [
-          { from: /./, to: path.posix.join(options.devBaseUrl, 'index.html') }
+          { from: /./, to: path.posix.join(options.baseUrl, 'index.html') }
         ]
       },
       contentBase: api.resolve('public'),
       watchContentBase: !isProduction,
       hot: !isProduction,
       quiet: true,
       compress: isProduction,
-      publicPath: options.devBaseUrl,
+      publicPath: options.baseUrl,
       overlay: isProduction // TODO disable this
         ? false
         : { warnings: false, errors: true }

diff --git a/packages/@vue/cli-service/lib/config/dev.js b/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.baseUrl)
 
       webpackConfig
         .plugin('hmr')

diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
@@ -2,7 +2,6 @@ const { createSchema, validate } = require('@vue/cli-shared-utils')
 
 const schema = createSchema(joi => joi.object({
   baseUrl: joi.string(),
-  devBaseUrl: joi.string(),
   outputDir: joi.string(),
   assetsDir: joi.string(),
   runtimeCompiler: joi.boolean(),
@@ -48,9 +47,6 @@ exports.defaults = () => ({
   // project deployment base
   baseUrl: '/',
 
-  // baseUrl, but for the dev server.
-  devBaseUrl: '/',
-
   // where to output built files
   outputDir: 'dist',
 

diff --git a/packages/@vue/cli-service/lib/util/prepareURLs.js b/packages/@vue/cli-service/lib/util/prepareURLs.js
@@ -10,20 +10,20 @@ const url = require('url')
 const chalk = require('chalk')
 const address = require('address')
 
-module.exports = function prepareUrls (protocol, host, port) {
+module.exports = function prepareUrls (protocol, host, port, pathname = '/') {
   const formatUrl = hostname =>
     url.format({
       protocol,
       hostname,
       port,
-      pathname: '/'
+      pathname
     })
   const prettyPrintUrl = hostname =>
     url.format({
       protocol,
       hostname,
       port: chalk.bold(port),
-      pathname: '/'
+      pathname
     })
 
   const isUnspecifiedHost = host === '0.0.0.0' || host === '::'

diff --git a/packages/@vue/cli-service/lib/util/resolveClientEnv.js b/packages/@vue/cli-service/lib/util/resolveClientEnv.js
@@ -1,14 +1,13 @@
 const prefixRE = /^VUE_APP_/
 
 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 = isProd ? options.baseUrl : options.devBaseUrl
+  env.BASE_URL = options.baseUrl
 
   if (raw) {
     return env

diff --git a/packages/@vue/cli-ui/index.js b/packages/@vue/cli-ui/index.js
@@ -1,7 +1,8 @@
 exports.clientAddonConfig = function ({ id, port = 8042 }) {
   return {
-    baseUrl: `/_addon/${id}`,
-    devBaseUrl: `http://localhost:${port}/`,
+    baseUrl: process.env.NODE_ENV === 'production'
+      ? `/_addon/${id}`
+      : `http://localhost:${port}/`,
     configureWebpack: {
       output: {
         // Important