在实际开放中会涉及到测试环境、生产环境的打包问题,使用webpack init 生成的vue项目需要每次去手动修改请求地址,着实很影响效率(实际就是懒),所以根据这个需求进行了不同环境打包时请求地址的分配,具体操作如下:
涉及文件:
1.build > webpack.prod.config.js, util.js;
2.config > index.js, test.env.js(added);
3.package.json;
4.axios文件(baseurl);
具体步骤:
1.config下新建test.env.js文件,格式与prod.env.js一样
‘use strict’
module.exports = {
NODE_ENV:'"testing"',
ENV_CONFIG: '"test"'
}
2.build > webpack.config.js,根据运行的环境来引入相关文件
// const env = require('../config/prod.env')
var env;
if(process.env.NODE_ENV === 'testing') {
env = require('../config/test.env')
}else{
env = require('../config/prod.env')
}
3.build > util.js
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)}
4. package.json
"script": {
"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
}
5. 请求文件中根据 process.env.NODE_ENV 进行配分就大功告成啦;
*如果出现测试环境打包出来的文件路径找不到的报错记得去更改config > index.js 下的dev中assetsPublicPath为'./'相对路径;