第一步 本地配置文件以及固定端口号
项目使用vue开发，首先修改vue.config.js配置文件，固定端口号，在项目目录中新建.env文件，vue启动的时候如果是本地，会自动调用.env文件，启动的时候怎么知道是本地呢？这是我学习vue后好长一段时间都疑惑的问题，后来了解到，当你本地启动项目的时候是这样的：
yarn serve 或者npm run dev 或者npm run serve
你执行了命令，vue就能知道你是本地启动的呢，于是它便自动查找是否存在.env配置文件，如果有便读取，所以我们做的第一步便是固定项目启动的端口号，以下是我的配置文件
NODE_ENV=developmentVUE_APP_PREVIEW=falseVUE_APP_API_BASE_URL=/v1/mPORT=9090VUE_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 #是一个二级域名# 你也可以使用顶级域名127.0.0.1
第三步 安装nginx代理
mac首先要安装brew，就像linux系统的
sudo apt install ***
在安装brew的时候总是安装失败，打开代理安装也很慢，最后找到了一个大佬提供的方法
/bin/zsh -c "$(curl -fsSL /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 serverssudo touch test.confsudo vim test.conf
加入以下配置信息：
server {# 指定端口（nginx默认监听的端口，不用管）listen 80;# 修改位置——被代理的对应域名server_name dev-;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 / {# 代理到的开发地址,之前我们有固定呢项目启动端口号为9090proxy_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_timeout90;proxy_read_timeout90;proxy_buffer_size4k;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的问题
