[英]Vue.js: Defining computed environment variables in vue.config.js (vue cli 3)
The documentation for Vue CLI 3 says here https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code : Vue CLI 3 的文档在这里说https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code :
You can have computed env vars in your
vue.config.js
file.您可以在
vue.config.js
文件中计算环境变量。 They still need to be prefixed withVUE_APP_
.它们仍然需要以
VUE_APP_
为前缀。 This is useful for version infoprocess.env.VUE_APP_VERSION = require('./package.json').version
这对版本信息很有用
process.env.VUE_APP_VERSION = require('./package.json').version
This is exactly what I want to do.这正是我想要做的。 But I couldn't find out how to actually define the env var there in
vue.config.js
.但我不知道如何在
vue.config.js
实际定义环境vue.config.js
。 I tried:我试过:
module.exports = {
process.env.VUE_APP_VERSION: require("../package.json").version,
...
}
But it just produces an error:但它只会产生一个错误:
ERROR SyntaxError: Unexpected token .
/Users/lhermann/htdocs/langify/frontend/vue.config.js:2
process.env.VUE_APP_VERSION: require("../package.json").version,
^
Does anyone know?有人知道吗?
The environment variables are not part of the config export, you just set them in the vue.config.js
file, eg环境变量不是配置导出的一部分,您只需在
vue.config.js
文件中设置它们,例如
process.env.VUE_APP_VERSION = require('./package.json').version
module.exports = {
// other config, eg configureWebpack
}
I've raised a feature-request to get an example added to the docs ~ https://github.com/vuejs/vue-cli/issues/2864我提出了一个功能请求以将示例添加到文档中 ~ https://github.com/vuejs/vue-cli/issues/2864
According to Environment Variables and Modes documentation , you can specify env variables by placing .env
files in your project root.根据环境变量和模式文档,您可以通过将
.env
文件放在项目根目录中来指定 env 变量。
The variables will automatically be accessible under process.env.variableName
in your project.这些变量将在项目中的
process.env.variableName
下自动访问。 Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.加载的变量也可用于所有 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
Your .env
file(s) should look like this:您的
.env
文件应如下所示:
VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value
Note that only variables that start with VUE_APP_
will be statically embedded into the client bundle with webpack.DefinePlugin
.请注意,只有这样开始的变量
VUE_APP_
将静态嵌入到与客户端捆绑webpack.DefinePlugin
。
If you want variables that need pre-processing, you can use chainWebpack
property of vue.config.js
to inject anything you want:如果你想需要预处理的变量,你可以使用
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
})
}
// ...
}
Using this method, you can inject anything, with any names you want;使用这种方法,你可以注入任何你想要的名字; you are not bound by the
VUE_APP_
limitation.您不受
VUE_APP_
限制的约束。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.