最近的项目需要配置双路由模式的多环境打包，在每个环境下直接执行命令行即可，无需每次打包前再去修改变量。
本次使用的vue-cli4，history模式下需要打包到content目录下，且访问路径要携带content/，hash模式直接是根路径。需要打包测试环境（history模式 + hash模式）和正式环境（history模式 + hash模式），为了开发运行方便也加了本地运行的两个模式的命令。
配置如下：
先加了几个env.[*] 文件，

• .env.development 本地运行的hash模式
• .env.historyDev 本地运行的history模式
• .env.test 测试平台的hash模式（连接测试环境）
• .env.historyTest 测试平台的history模式（连接测试环境）
• .env.production 正式平台的hash模式（连接正式环境）
• .env.history 正式平台的history模式（连接正式环境）

所有history模式下的添加环境变量：VUE_APP_ROUTER=‘history’
所有hash模式下的添加环境变量：VUE_APP_ROUTER=‘hash’ （也可以不加，默认是hash）

本地运行的.env.historyDev 需添加：NODE_ENV = ‘development’
正式、测试平台因为是打包的需添加：NODE_ENV = ‘production’
否则执行命令会报错
举例：
.env.historyTest

VUE_APP_ROUTER='history'
NODE_ENV = 'production'
// ... 其他配置的变量，如测试环境地址

.env.history

VUE_APP_ROUTER='history'
NODE_ENV = 'production'
// ... 其他配置的变量，如正式环境地址

在package.json配置命令：

"scripts": {
    "build-test": "vue-cli-service build --mode test",
    "build-history": "vue-cli-service build --mode history",
    "build-history-test": "vue-cli-service build --mode historyTest",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve": "vue-cli-service serve",
    "serve-history": "vue-cli-service serve --mode historyDev"
  },

这样vscode就可以加载出不同的命令，按不同模式执行即可，不用每次根据不同环境修改代码了。

然后修改需要根据不同模式修改的地方：直接使用process.env.VUE_APP_ROUTER === 'history’即可判断是不是history路由模式。
router/index.js

let routerType = {}
if (process.env.VUE_APP_ROUTER === 'history') {
  inRouter, ...web)
  routerType = {
    mode: 'history',
    base: '/content/'
  }
}
const router = new VueRouter({
  ...routerType,
  routes
})

router/index.js中的base需要和publicPath路径保持一致
vue.config.js

const isHistory = process.env.VUE_APP_ROUTER === 'history'
const baseUrl = '/'
module.exports = {
  publicPath: isHistory ? '/content/' : './',
  outputDir: isHistory ? 'content' : 'master',
  assetsDir: 'static',
  // .... 其他配置
}

如果需要在组件中用到也可以直接在main.js中添加：

Vue.prototype.$isHistory = process.env.VUE_APP_ROUTER === 'history'

即可直接在组件中使用this.$isHistory