使用重定向域名实现微信公众号网页的本地调试

写在前面：

当使用Vue开发网页时，由于缺少微信环境，一旦涉及到微信官方api内容的调试时就需要打包->部署到服务器->调试->修改->打包->再部署.....实在是太麻烦了，本文教你如何通过修改host的方式实现重定向域名解析将微信公众号网页映射到本地调试

实现原理:

通过修改hosts文件，将某个域名解析到特定的IP地址，可以绕过DNS服务器的解析过程，直接将域名映射到指定的IP地址。这种方法通常用于开发、测试或绕过访问限制等特殊情况,也就是说，我们获得了一个具有微信环境的本地服务，就可以在微信开发者工具/微信浏览器中实时看到修改的效果，不需要每次修改都部署一遍服务器。

实现步骤：

1.打开C:\Windows\System32\drivers\etc\hosts文件（修改权限完全控制并使用管理员权限修改）

添加一行代码

127.0.0.1 xxxx.com

其中xxxx.com应为你的公众号域名，不要带http协议头

2.修改vue.config.js端口号

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: '80',
  }

是因为前端项目监听的端口号， 和请求的url不同。前端经常是3000,8080等，而浏览器访问的地址，一般都是走80端口，这里修改前端项目监听的端口号位80，此处以webpack项目为例：

3.打开浏览器/微信开发者工具，输入xxxx.com解析成功，项目成功实现在本地调试

这篇好文章是转载于：学新通技术网