在vue组件中获取vue-config中的环境变量
在 vue.config.js 中配置环境变量
在vue.config.js
里,你可以通过process.env
来设置自定义的环境变量。示例如下:
// vue.config.js
const LOCAL_HOST = 'http://192.168.1.100';
module.exports = {
chainWebpack: config => {
// 设置环境变量
config.plugin('define').tap(args => {
args[0]['process.env'].LOCAL_HOST = JSON.stringify(LOCAL_HOST);
return args;
});
}
};
在 Vue 组件中获取环境变量
在 Vue 组件里,你能够通过process.env
来获取之前设置的环境变量。示例代码如下:
<template>
<div>
<p>LOCAL_HOST: {{ localHost }}</p>
</div>
</template>
<script>
export default {
data() {
return {
localHost: process.env.LOCAL_HOST
};
}
};
</script>
vue.config.js
中的配置:chainWebpack
是vue.config.js
提供的一个用于链式修改 Webpack 配置的方法。config.plugin('define')
用于获取 Webpack 的DefinePlugin
实例,该插件可以在编译时将全局常量注入到代码中。tap
方法用于修改插件的参数,我们在这里将LOCAL_HOST
作为环境变量注入到process.env
中。
- 环境变量在编译时就会被替换,所以修改
vue.config.js
后需要重新启动开发服务器或者重新构建项目。
打包会替换
在 Webpack 构建过程中,DefinePlugin
会在编译阶段对代码中引用的process.env
相关变量进行替换。以你之前的示例来说,process.env.LOCAL_HOST
会在编译时被替换成具体的值'http://192.168.1.100'
。
在打包时,Webpack 会把process.env.LOCAL_HOST
替换成实际的值,最终打包生成的代码中不会再出现process.env.LOCAL_HOST
,而是直接使用具体的'http://192.168.1.100'
。
影响
- 优点:变量在打包时被固化到代码中,无需在运行时额外去获取变量值,避免了额外的请求或依赖,使代码可以独立运行。
- 缺点:如果后续需要修改这个变量的值,就必须重新打包整个项目。因为变量已经被硬编码到打包后的文件里了,不重新打包无法更改其值。