vue在env development中设置全局变量不生效
原因：vue对全局变量进行了处理，除开NODE_ENV其它变量需以VUE_APP_为前缀才能成效，具体代码如下:
// @vue/cli-service/lib/util/resolveClientEnv.js
const prefixRE = /^VUE_APP_/
module.exports = function resolveClientEnv (options, raw) {
const env = {}
Object.keys(process.env).forEach(key => {
if (prefixRE.test(key) || key === 'NODE_ENV') {
env[key] = process.env[key]
}
})
env.BASE_URL = options.publicPath
if (raw) {
return env
}
for (const key in env) {
env[key] = JSON.stringify(env[key])
}
return {
'process.env': env
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
这里我们可以利用webpack打包工具设置变量，在vue.config.js的chainWebpack中进行配置
chainWebpack: (config) => {
// DefinePlugin
config.plugin('define').tap(args => {
// console.log(args)
// [
// {
// 'process.env': {
// NODE_ENV: '"development"',
// BASE_URL: '"/"'
// }
// }
// ]
// 使用JSON.stringify
args[0]['process.env'].VERSION = JSON.stringify('v1.0.0');
return args;
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
提示
通过DefinePlugin设置变量时，需要搭配JSON.stringify使用，详细请查看官方文档
上次更新: 2025/09/05, 8:09:00