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