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,
           ^

有人知道吗？

- lhermann

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。

- Phil

---

谢谢你帮助我解决困惑。我刚刚确认它确实像你建议的那样运行良好！ - lhermann

@Phil 我在我的vue.config.js文件中放置了相同的代码行，它在serve上工作，但是当我生成构建时，它无法获取package.json版本号，并且在应用程序中显示未定义。 - Adnan Ahmed Ansari

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一起静态嵌入到客户端包中。

计算环境变量：

如果您需要预处理的变量，可以使用vue.config.js的chainWebpack属性注入任何内容：

// 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_限制。

- Ricardo Nolde