说明需要解决的问题
对于前端开发过程中,需要对生产环境和测试环境有不同的操作。
比如在处理AK/SK等安全性相关的变量时,对于生产环境和测试环境会有不同的取值。
对于这种需求,开发人员无法在写完代码之后到生产环境中进行测试。
这时候就需要本地网址去模拟域名来仿造生产环境
解决的方法
1,如果模拟的域名没有端口号。
把本地启动的服务地址比如 http://10.10.10.10:80 分别映射到 http://xxx.com 和 http://xxx.cn,注意一定要是80端口
因为http默认的端口是80。
对于hosts 文件只能控制 域名解析的 IP 地址,无法控制端口,所以不应该加端口。加端口是无效的
在host文件中添加
127.0.0.1 example.com
错误示范:
127.0.0.1:10 example.com
127.0.0.1 example.com:10
2, 模拟的域名存在端口
- 修改host文件 127.0.0.1 映射到 example.com 域名
- 修改vue.config.js中的host和post即可,如下
devServer: {
host: 'example.comn',
port: 90,
open: true,
},
npm run serve 之后就可以看到网址变化了。