微信开发者工具网页h5本地开发，解决微信公众号绑定域名，本地无法调用微信api问题

第一步 本地配置文件以及固定端口号

项目使用vue开发，首先修改vue.config.js配置文件，固定端口号，在项目目录中新建.env文件，vue启动的时候如果是本地，会自动调用.env文件，启动的时候怎么知道是本地呢？这是我学习vue后好长一段时间都疑惑的问题，后来了解到，当你本地启动项目的时候是这样的：

yarn serve 或者
npm run dev 或者
npm run serve

你执行了命令，vue就能知道你是本地启动的呢，于是它便自动查找是否存在.env配置文件，如果有便读取，所以我们做的第一步便是固定项目启动的端口号，以下是我的配置文件

NODE_ENV=development
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/v1/m
PORT=9090
VUE_APP_API_ORIGIN=https://***
PROXV_TARGET=https://***

在这里我固定了端口号为9090端口

第二步 修改hosts文件

mac和linux系统直接输入命令修改hosts文件

sudo vim /etc/hosts

如果你是windows系统，请自行查找如何修改hosts文件哦（因为我也忘了，哈哈哈哈）;
在hosts文件中添加以下配置：

127.0.0.1 域名

例子

127.0.0.1 dev.bfclouds.cn  #dev.bfclouds.cn是一个二级域名
# 你也可以使用顶级域名
127.0.0.1 bfclouds.cn

第三步 安装nginx代理

mac首先要安装brew，就像linux系统的

sudo apt install ***

在安装brew的时候总是安装失败，打开代理安装也很慢，最后找到了一个大佬提供的方法

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

mac快速一键安装brew

安装nginx

安装

brew install nginx

卸载

brew uninstall nginx

启动

brew services start nginx

停止

brew services stop nginx

重启

brew services restart nginx

修改nginx配置文件

通过上面的步骤安装nginx，默认安装在/usr/local/etc/下，切换到对应的目录下

cd /usr/local/etc/nginx

目录下有个servers文件夹，查看nginx.conf可以看到引入了servers中的所有文件；（以前使用ubuntu的时候，是引入的*.conf文件，文件夹名字也不叫servers），在servers中添加一个**.conf文件（文件名随便取）；

cd servers
sudo touch test.conf
sudo vim test.conf

加入以下配置信息：

server {
     # 指定端口（nginx默认监听的端口，不用管）
   listen    80;
     # 修改位置——被代理的对应域名
   server_name dev-m.cardcat.cn;
   error_log  /usr/local/etc/nginx/logs/cardcat.log;
   error_log  /usr/local/etc/nginx/logs/cardcat.log  notice;
   error_log  /usr/local/etc/nginx/logs/cardcat.log  info;
   location / {
       # 代理到的开发地址,之前我们有固定呢项目启动端口号为9090
     proxy_pass http://127.0.0.1:9090/;

     proxy_redirect   off;
     proxy_set_header  Host       $host;
    # proxy_set_header  X-Real-IP    $remote_addr;
    # proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    # proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
     proxy_max_temp_file_size 0; # 不限制缓存大小，否则css、js文件过大的时候，微信开发者工具是缓存下来再读取，如果限制缓存大小会出错
     # 其他为代理的连接时间、超时时间等等的配置
     proxy_connect_timeout   90;
     proxy_send_timeout     90;
     proxy_read_timeout     90;
     proxy_buffer_size     4k;
     proxy_buffers       4 32k;
     proxy_busy_buffers_size  64k;
     proxy_temp_file_write_size 64k;
   }
 }

重启nginx

brew services restart nginx

打开微信开发者工具

输入url，打开失败，http自动变成https协议，因为我之前有输入过https协议的url，具体解决办法看我另一片文章，完美解决微信开发者工具htpp自动变成https的问题