vue正式環境與測試環境壓包配置方法(vue-cli 2.0)

clg333zzz發表於2019-03-04
Vue

本例教程基於vue-cli 2.0建立的專案。
適合當前專案有多個不同api基地址的情況。
對於最新的vue-cli 3.0是不適用的，vue-cli 3.0實現方式將更加簡單，更容易理解。

1.安裝cross-env

cnpm install --save-dev cross-env
複製程式碼

2. package.json配置修改

這裡分別新增env_config=prod，env_config=dev來控制當前的壓包環境

package.json

"scripts": {
-  "build": "node build/build.js",
+  "build:prod": "cross-env env_config=prod node build/build.js",
+  "build:dev": "cross-env env_config=dev node build/build.js"
}
複製程式碼

3. 建立介面配置檔案

我們在src資料夾下面新建一個檔案apiUrl.js，用來專門配置介面地址的。

src/apiUrl.js

const master = {
  api1: `http://pro1.com/`,
  api2: `http://pro2.com/`,
};
const dev = {
  api1: `http://prodev1.com/`,
  api2: `http://prodev2.com/`,
};
// 如果還有其他的，可以自定義新增，但是一定要記得匯出去。
module.exports = { master, dev };
複製程式碼

4. webapck配置修改

本地測試配置檔案bulid/webpack.dev.conf.js修改

// ...
+ const api = require(`../src/apiUrl`);
+ const env = require(`../config/dev.env`);
+ env.api = "`" + JSON.stringify(api.dev) + "`";
// ...

// ...
new webpack.DefinePlugin({
- `process.env`: require(`../config/dev.env`)
+ `process.env`: env
}), 
// ...
複製程式碼

線上壓包配置檔案build/webpack.prod.conf.js修改

// ...
const env = process.env.NODE_ENV === `testing`
  ? require(`../config/test.env`)
  : require(`../config/prod.env`)

+ const api = require(`../src/apiUrl`);
+ if(process.env.env_config === `prod`) {
+  env.api = "`" + JSON.stringify(api.master) + "`";
+ } else if(process.env.env_config === `dev`) {
+  env.api = "`" + JSON.stringify(api.dev) + "`";
+ }
// ...
複製程式碼

5. 獲取各自介面地址

src/api.js

// ...
// api介面地址，後續所有介面地址都可以在api裡面找到。
let api;
api = JSON.parse(process.env.api);
// ...
複製程式碼

6. 壓包命令

  • 生產環境壓包 
    npm run build:prod
複製程式碼
  • 測試環境壓包 
    npm run build:dev
複製程式碼
  • 本地測試 
    npm run dev
複製程式碼

相關文章