vue项目用vue.config.js来配合不同环境自动切换配置
1. 首先安装插件,并修改启动项安装cross-env 跨平台切换插件兼容好,-作用: 切换环境变量例如:不同的打包和运行命令切换不同的配置变量"scripts": {"serve": "cross-env type=dev vue-cli-service serve","build": "cross-env type=prod vue-cli-service build"}安装 process
·
1. 首先安装插件,并修改启动项
- 安装cross-env 跨平台切换插件兼容好,
-作用: 切换环境变量
例如:
不同的打包和运行命令切换不同的配置变量
安装命令:
npm i cross-env -D
"scripts": {
"serve": "cross-env type=dev vue-cli-service serve",
"build": "cross-env type=prod vue-cli-service build"
}
- 安装 process 插件 是node中读取nodejs总环境变量的所用参数
作用:在这里用来读取webpack配置的环境变量
安装命令:
npm i process -D
2. 好的准备完成,开始操作
vue项目用vue.config.js来配合不同环境自动切换配置
vue.config.js文件:
module.exports = {
chainWebpack: cofig => {
cofig.plugin('define').tap(args => {
console.log("env",process.env.type)//拿取在上面package.json 配置的自定义webpack的环境
args[0]['process.env'].type = process.env.type//将这个值设置到webpack的默认环境变量中
console.log('aaa', args)
return args;
})
}
}
在其他文件:
console.log("env",process.env.ages.type)//在其他文件进可以读取到了
视图:
更多推荐
已为社区贡献5条内容
所有评论(0)