前言:
开发上线的不同阶段,需要不同的配置(如:开发 测试 预发布 生产)
不同的跨域方式,配置不同
打包的时候统一注入环境参数,统一管理环境,输出不同的版本包

如果是代理就是用过nginx去访问后端服务所以不用考虑同源.
如果是jsonp和cors就需要考虑同源,这里的方法是通过env.js判断+package.json进行修改访问访问接口环境

env.js配置:

let baseURL;

switch (Process.env.NODE_ENV) {  //Process.env.NODE_ENV获取当前nodejs进程的环境变量
    case dev:
        baseURL="http://dev-docker-python.com/api" //开发
        break;
    case test:
        baseURL="http://test-docker-python.com/api" //测试
        break;
    case prod:
        baseURL="http://docker-python.com/api" //生产
        break;
    default:
        baseURL="http://docker-python.com/api"
        break;
}

export default{
    baseURL,
}

示例:
J8[P4V_}U`@FCM$NYK@JO8O.png

package.json配置:
通过package.json的"serve": "vue-cli-service serve --module=dev" 进行设置开发 测试 生产环境的访问.

示例:![W6E@@4@5]$BH%J757D997~B.png][2]

main.js入口文件导入env

import env from './env'
axios.defaults.baseURL = env.baseURL

示例:
![K80S9PVN]XRPWZ2EU@XZM)6.png][3]

启动命令:
npm run test 或者yarn test 这个test会去找vue-cli-service serve --module=dev module后面对应的模块

如果test找不到就需要创建一个.env.test文件不然会找不到NODE_ENV变量

NODE_ENV="test"

总结:
总的来说这个有点绕,但是细细的品味一下还可以,并且这一章节很重要,不需要改大代码就可以修改当前环境,是很方便的。

最后修改:2021 年 03 月 23 日 10 : 34 PM
感谢您的,打赏!