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

本例教程基於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
  複製代碼