代码之家 › 专栏 › 技术社区 › lhermann jfriend00

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

vue-cli-3 environment-variables vue.js javascript

lhermann jfriend00 · 技术社区 · 7 年前

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

有人知道吗?

1 回复 | 直到 7 年前

Phil 7 年前

环境变量不是配置导出的一部分,您只需在 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

Ricardo Nolde 6 年前

常见环境变量:

Environment Variables and Modes documentation ,可以通过放置 .env 项目根目录中的文件。

变量将在下面自动访问 process.env.variableName 在你的项目中。加载的变量也可用于所有vue cli服务命令、插件和依赖项。

.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_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

VUE_APP_ 将静态嵌入到客户端包中 webpack.DefinePlugin

计算的环境变量:

如果需要需要预处理的变量,可以使用 chainWebpack 财产 vue.config.js

// 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\u应用程序_