背景: 在開(kāi)發(fā)mpvue過(guò)程中,打包只需要使用npm run build命令即可編譯打包,但是這種情況下就只能編譯某一個(gè)環(huán)境,但是在我們的實(shí)際開(kāi)發(fā)中,又不可能每次發(fā)布不同環(huán)境去手動(dòng)修改配置信息,所以我們就通過(guò)做一些配置,通過(guò)使用webpack來(lái)進(jìn)行修改環(huán)境信息。

準(zhǔn)備工作：

1.初始化一個(gè)mpvue工程

vue init F-loat/mpvue-quickstart my-project

注意:這里使用的模板非官方最新模板,因?yàn)樽罱l(fā)現(xiàn)最新的官方模板創(chuàng)建完成后,編譯時(shí)會(huì)出現(xiàn)sourceMap映射不對(duì)的問(wèn)題,所以使用了mpvue-entry作者git上的模板

2.安裝cross-env

npm install cross-env --save-dev

簡(jiǎn)單說(shuō)明下為何要安裝cross-env,因?yàn)閣indows不支持NODE_ENV=development的設(shè)置方式,而cross-env能夠提供一個(gè)設(shè)置環(huán)境變量的scripts，讓你能夠以u(píng)nix方式設(shè)置環(huán)境變量，然后在windows上也能兼容運(yùn)行。

3.配置package.json文件

在scripts節(jié)點(diǎn)下,新增幾個(gè)屬性

"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"
  }

無(wú)特殊情況我們不會(huì)去連接或調(diào)試生產(chǎn)環(huán)境,只會(huì)在打包時(shí)使用,所以在開(kāi)發(fā)時(shí)沒(méi)配置正式環(huán)境的節(jié)點(diǎn),只配置了本地,dev,uat三個(gè)環(huán)境。local節(jié)點(diǎn)是拿來(lái)連接自己本地服務(wù)的，配置信息相對(duì)會(huì)簡(jiǎn)單些,可以只把本地相關(guān)的信息做個(gè)配置即可。

4.修改config/prod.env.js文件

默認(rèn)情況下,該文件只會(huì)export一個(gè)屬性

module.exports = {
  NODE_ENV: '"production"'
}

所以我們?cè)僭黾右粋€(gè)節(jié)點(diǎn)

module.exports = {
  NODE_ENV: '"production"',
  env : '"' + process.env.env + '"' // 最后一個(gè)env屬性就是我們?cè)趐ackage.json中配置的env后面的參數(shù)
}

5.在src目錄下創(chuàng)建文件

配置文件.png

環(huán)境配置文件最終使用的是env.js
而其他的env.xxx.js是用于給env.js提供配置信息的。
比如:env.local.js,其他文件類型,就不列舉了

/*本地環(huán)境配置信息*/
var local = {
  env:'local',
  baseUrl: 'http://localhost:8002'
};
export default local;

env.js:

/*打包及編譯使用的環(huán)境信息文件*/
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;
// 根據(jù)json中配置的信息,給environment變量賦值
switch (process.env.env) {
  case "local": // 本地調(diào)試
    environment = local;
    break;
  case "dev": // dev環(huán)境
    environment = dev;
    break;
  case "uat": // uat
    environment = uat;
    break;
  case "prod": // prod
    environment = prod;
    break;
  default:
    console.log("環(huán)境信息異常!");
}
// 將環(huán)境信息做整合
Object.assign(env,environment);
export default env;

我們?cè)诘?步中增加了prod.env.js文件的參數(shù),因此我們可以在env.js中,通過(guò)process.env.env中變量的值,判斷不同的環(huán)境信息,進(jìn)而實(shí)現(xiàn)不同環(huán)境的參數(shù)切換。

至此我們就完成了環(huán)境切換的配置,在本地運(yùn)行調(diào)試開(kāi)發(fā)時(shí),只需要運(yùn)行:

npm run local
或
npm run dev
或
npm run uat

在發(fā)布代碼時(shí),則執(zhí)行

npm run build:dev
或
npm run build:uat
或
npm run build:prod