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
  复制代码