公共环境变量：

Question

Vue CLI 3的文档在此处https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code表示：

您可以在vue.config.js文件中计算出环境变量。它们仍然需要前缀VUE_APP_。这对于版本信息process.env.VUE_APP_VERSION = require('./package.json').version
很有用

这正是我想要做的。但是我找不到如何在vue.config.js中实际定义env var的方法。我尝试过：

module.exports = {
    process.env.VUE_APP_VERSION: require("../package.json").version,
    ...
}

但是它只会产生一个错误：

ERROR  SyntaxError: Unexpected token .
    /Users/lhermann/htdocs/langify/frontend/vue.config.js:2
    process.env.VUE_APP_VERSION: require("../package.json").version,
           ^

有人知道吗？

Answer 1

环境变量不是配置导出的一部分，您只需在vue.config.js文件中进行设置即可，例如

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // other config, eg configureWebpack
}

我提出了一项功能请求，以向文档添加一个示例〜https://github.com/vuejs/vue-cli/issues/2864

Answer 2

公共环境变量：

根据Environment Variables and Modes documentation，您可以通过将.env文件放在项目根目录中来指定环境变量。

将在项目的process.env.variableName下自动访问变量。加载的变量也可用于所有vue-cli-service命令，插件和依赖项。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

您的.env文件应如下所示：

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

请注意，只有以VUE_APP_开头的变量才会通过webpack.DefinePlugin静态地嵌入到客户端包中。

计算的环境变量：

如果您需要变量进行预处理，可以使用vue.config.js的{{3}}属性来注入所需的任何东西：

// vue.config.js

module.exports = {
  // ...,
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0]['process.env'].APP_VERSION = `"${require("../package.json").version}"`
      return args
    })
  }
  // ...
}

使用此方法，可以注入任何具有所需名称的东西。您不受VUE_APP_限制的约束。

Vue.js：在vue.config.js中定义计算的环境变量（Vue CLI 3）

2 个答案:

公共环境变量：

计算的环境变量：