mpvue通过webpack配置不同环境信息

背景: 在开发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

mpvue通过webpack配置不同环境信息