前端开发本地网址模拟生产环境/ 测试环境

说明需要解决的问题

对于前端开发过程中，需要对生产环境和测试环境有不同的操作。
比如在处理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 之后就可以看到网址变化了。