项目中一般上线的流程是开发测试-->集成测试-->正式环境。平时我们开发好的一个版本代码都是在开发测试环境测试,然后是上集成测试给测试组专门测试用,最后是上线到生产环境给客户使用。
这时候项目打包会用到不同的地址,但是又不可能每次都去修改我们自己配的公共的接口地址,所有我们会根据不同的npm指令去打包不同的环境的版本。
首先,介绍一下项目使用vue框架的代码结构,项目使用的是vue单页面开发,创建了一个api.js文件用于存放所有的接口URL和所有环境的地址
let serverConfig = { //打包环境 'dev': ['http://xxx','http://xxx'], // npm run dev 'release': ['http://xxx','http://xxx'], // npm run build release 'master': ['http://xxx','http://xxx'], // npm run build master 'default': ['http://xxx', 'http://xxx'] // npm run build }, curServer = BUILD_SERVICE_CONFIG ? serverConfig[BUILD_SERVICE_CONFIG] : serverConfig['default'], apiPath = curServer[0], basicPath = curServer[1], api = `${apiPath}/cus/custbizrelmng`, // 客户地址 apiBasicUrl = `${basicPath}/bas/bizqueryprivapp/basiccenter/queryservice`; // 基础地址 export default { replace(Url, val1, val2) { for(let i = 0; i < val1.length; i++) { Url = Url.replace(val1[i], val2[i]) } return Url }, //公共路径 url: '../',
// 权限
GetUserStorage: apiBasicUrl + "/systemUser"
}
注意:项目中用到了两个平台提供的接口,所以配了两个变量,如果只有一个平台提供接口,那就只需要配一个
代码贴出来了,还是不能正常运行打包的,因为还没有配置打包文件和运行配置文件
webpack.dev.conf.js文件配置
new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), 'BUILD_SERVICE_CONFIG': JSON.stringify('') //获取打包时 不同的参数 }),
webpack.prod.conf.js文件配置
new webpack.DefinePlugin({ 'process.env': env, 'BUILD_SERVICE_CONFIG': JSON.stringify(process.argv.splice(2)[0]) //获取打包时 不同的参数 }),
做好这些工作后就可以用不同的npm指令打包不同环境的代码版本了