Vue.js：在 vue.config.js (vue cli 3) 中定义计算环境变量

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. 我试过：

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

常见环境变量：

根据环境变量和模式文档，您可以通过将.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。

计算的环境变量：

如果您想要需要预处理的变量，您可以使用chainWebpackproperty ofvue.config.js来注入您想要的任何内容：

.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

使用这个方法，你可以注入任何东西，任何你想要的名字；您不受该VUE_APP_限制的约束。