vue正式环境与测试环境压包配置方法

1.安装cross-env

cnpm install --save-dev cross-env

1. 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" }

1. 创建接口配置文件

src/apiUrl.js
const master = {  
    gameListAPI: 'http://',  
    
};
    const dev = { 
    gameListAPI: 'http:', 
    };
2/4
module.exports = { master, dev };

1. webapck配置修改
   本地测试

bulid/webpack.dev.conf.js
// ... 
const portfinder = require('portfinder')
    + 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) + "'"; 
} 
// ...

1. 获取各自接口地址

src/api.js
// ...
3/4
+ let api; 
// api接口地址 
if (process.env.NODE_ENV === 'production' && process.env.env_config === 'prod') { 
     // opapprelease master分支   
    api = JSON.parse(process.env.api); 
      gameListAPI = api.gameListAPI; 
    }else if (process.env.NODE_ENV === 'production' && process.env.env_config === 'dev') {
   // opapprelease dev分支 
    api = JSON.parse(process.env.api);
   gameListAPI = api.gameListAPI;
 } else {
   // 本地测试-测试接口 
   api = JSON.parse(process.env.api); 
   gameListAPI = api.gameListAPI;
} 
// ...

1. 压包命令
   生产环境压包

npm run build:prod

测试环境压包

npm run build:dev

4/4
本地测试

npm run dev

1. 项目构建配置修改(此环境构建属于自动部署服务下的环境变量的配置)
   先登录vue项目构建系统。
   进入对应项目配置，修改为现在的压包命令

release
- x64/bin/cnpm run build:prod
dev
inux-x64/bin/cnpm run build:dev