背景: 在开发mpvue过程中,打包只需要使用npm run build命令即可编译打包,但是这种情况下就只能编译某一个环境,但是在我们的实际开发中,又不可能每次发布不同环境去手动修改配置信息,所以我们就通过做一些配置,通过使用webpack来进行修改环境信息。
准备工作：
1.初始化一个mpvue工程
vue init F-loat/mpvue-quickstart my-project
注意:这里使用的模板非官方最新模板,因为最近发现最新的官方模板创建完成后,编译时会出现sourceMap映射不对的问题,所以使用了mpvue-entry作者git上的模板
2.安装cross-env
npm install cross-env --save-dev
简单说明下为何要安装cross-env,因为windows不支持NODE_ENV=development的设置方式,而cross-env能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。
3.配置package.json文件
在scripts节点下,新增几个属性
"scripts": {
"local": "cross-env env=local node build/dev-server.js",
"dev": "cross-env env=dev node build/dev-server.js",
"uat": "cross-env env=uat node build/dev-server.js",
"build:dev": "cross-env env=dev node build/build.js",
"build:uat": "cross-env env=uat node build/build.js",
"build:prod": "cross-env env=prod node build/build.js"
}
无特殊情况我们不会去连接或调试生产环境,只会在打包时使用,所以在开发时没配置正式环境的节点,只配置了本地,dev,uat三个环境。local节点是拿来连接自己本地服务的，配置信息相对会简单些,可以只把本地相关的信息做个配置即可。
4.修改config/prod.env.js文件
默认情况下,该文件只会export一个属性
module.exports = {
NODE_ENV: '"production"'
}
所以我们再增加一个节点
module.exports = {
NODE_ENV: '"production"',
env : '"' + process.env.env + '"' // 最后一个env属性就是我们在package.json中配置的env后面的参数
}
5.在src目录下创建文件
配置文件.png
环境配置文件最终使用的是env.js
而其他的env.xxx.js是用于给env.js提供配置信息的。
比如:env.local.js,其他文件类型,就不列举了
/*本地环境配置信息*/
var local = {
env:'local',
baseUrl: 'http://localhost:8002'
};
export default local;
env.js:
/*打包及编译使用的环境信息文件*/
import local from "./env.local";
import dev from "./env.dev";
import uat from "./env.uat";
import prod from "./env.prod";
var env = {
baseUrl: ""
};
var environment = null;
// 根据json中配置的信息,给environment变量赋值
switch (process.env.env) {
case "local": // 本地调试
environment = local;
break;
case "dev": // dev环境
environment = dev;
break;
case "uat": // uat
environment = uat;
break;
case "prod": // prod
environment = prod;
break;
default:
console.log("环境信息异常!");
}
// 将环境信息做整合
Object.assign(env,environment);
export default env;
我们在第4步中增加了prod.env.js文件的参数,因此我们可以在env.js中,通过process.env.env中变量的值,判断不同的环境信息,进而实现不同环境的参数切换。
至此我们就完成了环境切换的配置,在本地运行调试开发时,只需要运行:
npm run local
或
npm run dev
或
npm run uat
在发布代码时,则执行
npm run build:dev
或
npm run build:uat
或
npm run build:prod
