方法一:host与Nginx代理
1、本地host映射域名
vscode打开,地址、域名不可加端口号
win:C:\Windows\System32\drivers\etc
macos: 打开"访达"、点击顶部菜单:前往->前往文件夹、输入:/etc,并点击"前往"按钮
127.0.0.1 <域名>
2、配置nginx(代理80端口)
nginx安装https://blog.csdn.net/weixin_41964258/article/details/120758290https://blog.csdn.net/weixin_41964258/article/details/120758290配置文件: C:\nginx-1.20.1\conf\nginx.conf
server {
listen 80;
server_name <域名>;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
proxy_pass <本地项目地址>;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
3、项目配置(vue项目:禁用主机检查)
解决Invalid Host header
报错
"devServer": {
"disableHostCheck": true
}
4、 重启
重启 vue项目、nginx服务 (在nginx根目录cmd运行命令)
nginx.exe -s reload
安装win服务重启方式:service.exe restart
5、在 浏览器、微信开发者工具 中访问即可(仅限于本电脑)
方法二:Charles远程映射
1、配置
2、访问
(1)浏览器(刷新页面)、已直接代理到本地了
(2)微信小程序开发工具:(设置后、刷新页面)
(3)手机访问:
1、手机连上WiFi,确保手机跟PC是在同一个局域网内。
2、然后设置代理为手动,主机名填入PC的IP地址,端口8888,点击连接。
3、连接成功后,在手机端微信或者浏览器打开你要重定向的地址,这时候 Charles 会弹出一个提示框,点allow确定、在次刷新页面即可
4、如果访问的目标域名是https、还需要导出个 Charles证书、在手机中导入 Charles证书(选择用于wlan和xx应用都一起导入)