vue-cli3中process.env.BASE_URL在哪里设置？

Question

使用cli3创建模板时候(选择vue-router)会出现一个process.env.BASE_URL的环境变量在router.js中使用。

我查阅了vue-cli3 环境变量和模式的文档，发现只能使用VUE_APP_开头的环境变量（可以在可运行代码中使用）。

如果我想根据模式去更改process.env.BASE_URL这个环境变量应该怎么做呢？

如果我不想使用VUE_APP_开头的环境变量呢？

Answer 1

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

Answer 2

VUE_APP_用这个开头的变量是可以收到的，所以没有问题
"serve": "vue-cli-service serve --open --mode dev "
配置serve的时候这样就可以直接调用到不同环境了，我是在找@cli配置问题找到的这个问题，希望可以帮助到需要的人。

Answer 3

在根目录的 vue.config.js 中配置 baseUrl

如果你要看原理的化可以看这部分源码，我之前写了 vue-cli 3 相关的一些分析文章

源码部分：@vue/cli-service/lib/util/resolveClientEnv.js

module.exports = function resolveClientEnv (options, raw) {
  const env = {}
  Object.keys(process.env).forEach(key => {
    if (prefixRE.test(key) || key === 'NODE_ENV') {
      env[key] = process.env[key]
    }
  })
  env.BASE_URL = options.baseUrl

  if (raw) {
    return env
  }

  for (const key in env) {
    env[key] = JSON.stringify(env[key])
  }
  return {
    'process.env': env
  }
}

核心就是：

env.BASE_URL = options.baseUrl