Vue 2x 項目配置開發、測試、正式環境

Vue Cli 2.x構建的項目只有npm run dev和npm run build兩條開發和編譯的命令。而要添加測試環境，我們可以擴展一條npm run test的命令輸出測試環境下執行的代碼。
1.在build文件夾中創建test.js文件
test.js中的代碼很簡單，就兩行。主要就是配置一個環境變量用以區別測試和正式環境。這裏沒有直接修改原有的process.env.NODE_ENV是擔心會影響到原本的邏輯。

注意：type的值必須單雙引號兩層嵌套，不能直接爲’test’，否則會報錯，具體代碼如下：
 

// 配置環境變量 type 爲 test
process.env.type = '"test"'
// 引入build.js文件，執行原先的編譯代碼
require('./build')

2.修改config文件夾中的prod.env.js文件
配置好後就可以在項目代碼中調用process.env.type了，代碼如下

module.exports = {
  NODE_ENV: '"production"',
  // 將上文設置的環境變量，賦值到 type 屬性上
  type: process.env.type
}

3.在package.json文件中添加npm run test命令
添加一條命令，執行我們上文創建的test.js文件

"scripts": {
    "dev": "node build/dev-server.js",
    "test": "node build/test.js",
    "build": "node build/build.js"
},

最後一步

let baseURL
// 開發環境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://192.168.1.110:8080/'
// 編譯環境
} else {
    // 測試環境
    if (process.env.type === 'test') {
        baseURL = 'http://test.xxx.com/'
    // 正式環境
    } else {
        baseURL = 'http://app.xxx.com/'
    }
}