前言

之前小玲一直處於更新，迭代專案的狀態，開發環境、測試環境、生產環境都是前輩配置好的，自己幾乎沒有配置過，這次做幾個新專案時，面臨著上線，需要分環境打包配置，於是在網上遨遊了一會會，摸索著按照網上的方法，試驗了一把，三種環境已經能夠用命令分開打包。於是便決定寫下這一篇可能已經過時但還能提供些微幫助的筆記

一般情況下我們執行命令 npm run build就能把Vue專案打包，但是這樣操作每次只能打包到一個環境，不同環境需要配置不同的地址，還得手動更改介面的地址，這給部署帶來了極大的不方便。

所以為了解決這個（偷）問題（懶），我們只需要按照以下幾步配置一下即可：

1.確定目錄結構：

2.修改config內的prod.env.js檔案：

1 'use strict'
2 module.exports = {
3    NODE_ENV: '"production"',
4    ENV_CONFIG:'"prod"'
5 }

3.在config目錄內新建test.env.js檔案(要保證和prod.env.js一致)：

1 'use strict'
2 module.exports = {
3     NODE_ENV: '"testing"',
4     ENV_CONFIG:'"test"'
5 }

4.在build目錄下修改webpack.prod.conf.js：

1 // const env = require('../config/prod.env')  註釋這一行
 

2 //新增下面幾行
3 if(process.env.NODE_ENV === 'testing') {
4     var env = require('../config/test.env')
5     console.log("test")
6 }else{
7     var env = require('../config/prod.env')
8     console.log("prod")
9 }

5.確認安裝cross-env，執行命令：

cnpm install cross-env --save-dev  或者   npm install cross-env --save-dev 
 

6.修改package.json檔案（在script裡面新增）：

 1 {
 2   "name": "teach-manger",
 3   "version": "1.0.0",
 4   "description": "teach and student  manager",
 5   "author": "xiaoling",
 6   "private": true,
 7   "scripts": {
 8     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9     "start": "npm run dev",
10     "lint": "eslint --ext .js,.vue src",
11     "build": "node build/build.js",
12     "build:report": "npm_config_report=true node build/build.js",
13     "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
14     "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
15   },

7.在放置公共檔案的目錄下或者axios.js檔案中（總之就是設定axios.defaults.baseURL之前）新建env.js，對環境進行判斷並切換，內容如下：

 1 /*
 2  * 配置編譯環境和線上環境之間的切換
 3  * baseUrl: 域名地址
 4  * routerMode: 路由模式
 5  * DEBUG: debug狀態
 6  * cancleHTTP: 取消請求頭設定
 7  */
 8 const baseUrl = '';
 9 const routerMode = 'history';
10 const DEBUG = false;
11 const cancleHTTP = [];
12 if (process.env.NODE_ENV == 'development') {
13     baseUrl = "http://192.168.xxx.xxx";
14     DEBUG = true;
15 }else if(process.env.NODE_ENV == 'testing'){
16     baseUrl = "http://test.xxx.com";
17     DEBUG = false;
18 }else if(process.env.NODE_ENV == 'production'){
19     baseUrl = "http://www.xxx.com";
20     DEBUG = false;
21 }
22 export{
23     baseUrl,
24     routerMode,
25     DEBUG,
26     cancleHTTP
27 }

8.在axios請求介面的檔案內引入env.js

 1 import axios from 'axios'
 2 import {Message} from 'element-ui'
 3 import store from '../store'
 4 import {getToken, removeToken} from '@/utils/auth'
 5 import {loginUrl} from '@/config/common'
 6 import {baseUrl} from '@/config/env'
 7 
 8 // 建立axios例項
 9 const service = axios.create({
10     // baseURL: process.env.BASE_API, // api的base_url
11     baseURL: baseUrl, // api的base_url
12     timeout: 50000, // 請求超時時間
13     headers: {
14         'X-Requested-With': 'XMLHttpRequest',
15         'Content-Type': 'application/json'
16     }
17 })

9.找到build/build.js 檔案，註釋或者刪除這行程式碼，這步非常重要，否則打包完會一直走生產環境

10.8.配置成功，執行命令如下

測試環境打包，執行：cnpm run build--test
生產環境打包，執行：cnpm run build--prod

好了，可以開啟偷懶模式了~