实际开发遇到webpack多环境问题
实际开发中可能遇到 开发时候环境:
模拟数据(mock)
本地环境(local)
开发环境(dev)
测试环境(test)
预发环境(pre)
生产环境(pro)
有些项目可能还涉及
重构环境(rfg-dev)
重构测试环境(rfg-test)
问题与解决
问题:多环境修改proxy,切换一次改一次,过于麻烦;有没有一劳永逸的方案
解决:只要在代理中改变代理路径(3个方案)
- 使用端口号【借鉴 vue-cli 的 ui界面, umi的ui界面】
- 运行时参数【因webpack是node环境运行的,相当于后端的server,借鉴node运行时参数】
- 多配置【考虑到web pack-merge既然能合并common、dev、pro,应该也可以产生多个dev(...)】
webpack.mock.js、
webpack.local.js、
webpack.test.js、
webpack.pre.js、
webpack.rfg-dev.js、
webpack.rfg-test.js
3-1. 即使用不同的proxy
只改变代理
方案1:使用端口号
思路:
- 启动不同的端口
- 不同的端口映射不同的proxy image-20201023100818852.png
// webpack自带端口启动配置参数,+ 请求request层的prefix,接口请求层级
// 如:
这个只需要写内部脚本即可
"serverType": {
"3001": "/apiMock",
"3002": "/apiLocal",
"3003": "/apiDev",
"3004": "/apiTest",
"3005": "/apiPre",
&#