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

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

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
const master = {  
    gameListAPI: 'http://',  
    
};
    const dev = { 
    gameListAPI: 'http:', 
    };
2/4
module.exports = { master, dev };
复制代码

4. 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) + "'"; 
} 
// ...
复制代码

5. 获取各自接口地址

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;
} 
// ...
复制代码

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

npm run build:prod
复制代码

测试环境压包

npm run build:dev
复制代码

4/4 本地测试

npm run dev
复制代码

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

release
- /usr/local/node-v8.9.3-linux-x64/bin/cnpm run build + /usr/local/node-v8.9.3-linux-x64/bin/cnpm run build:prod
dev
- /usr/local/node-v8.9.3-linux-x64/bin/cnpm run build + /usr/local/node-v8.9.3-linux-x64/bin/cnpm run build:dev
复制代码

转载于:https://juejin.im/post/5b334dc9e51d45589f46a3c9