一個(gè)不斷學(xué)習(xí)的前端菜鳥隆夯，歡迎指正，別噴别伏。蹄衷。。
前言
??場(chǎng)景: 公司公眾號(hào)線上域名后端大佬已經(jīng)配置好了厘肮，前端使用的是vue框架并引入微信-js-sdk愧口，域名已經(jīng)確定的情況下，想要調(diào)試微信的功能就得發(fā)布到線上类茂，然后在微信開發(fā)者工具上打開上線地址耍属。這對(duì)于菜鳥的我，就有點(diǎn)難受了啊巩检，畢竟試錯(cuò)試開發(fā)（手動(dòng)狗頭）厚骗，打個(gè)斷點(diǎn)，提交一下代碼兢哭，console一下领舰，提交一下代碼。這好家伙，這一天得多少個(gè)提交記錄冲秽。舍咖。。锉桑，還容易讓別人發(fā)現(xiàn)我菜鳥身份谎仲，哈哈哈。
步驟
一刨仑、 nginx安裝
??安裝 nginx郑诺，我電腦是Win10，所以下載的是windows版本
??下載之后復(fù)制到電腦其他地方解壓杉武，解壓后不要不要不要直接雙擊nginx.exe辙诞，在該目錄下cmd打開黑窗口進(jìn)行操作
??啟動(dòng)nginx服務(wù)，別在意他是否閃一下轻抱。 start nginx
??查看任務(wù)進(jìn)程是否存在飞涂，dos或打開任務(wù)管理器都行 tasklist /fi "imagename eq nginx.exe 能看到進(jìn)程說(shuō)明啟動(dòng)成功了。
二祈搜、 修改本地host文件
??win+R 輸入 C:\WINDOWS\system32\drivers\etc 點(diǎn)擊回車较店，如果路徑不對(duì)，百度看你系統(tǒng)的路徑在哪
??記事本打開hosts文件
??在最后一行添加 127.0.0.1 gongzhonghao.com gongzhonghao.com是你公司公眾號(hào)的線上域名
三容燕、 配置nginx
??修改nginx.conf文件
server {
listen 80;
server_name gongzhonghao.com; // 公眾號(hào)線上地址
location / {
proxy_pass http://localhost:8086; //你本地vue項(xiàng)目啟動(dòng)的ip和端口
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;
}
}
四梁呈、 修改vue項(xiàng)目配置
??修改vue.config.js 我是vue-cli4，其他版本自行修改
devServer{
disableHostCheck: true
}
??此步驟是為解決Invalid Host header報(bào)錯(cuò)
五蘸秘、 重啟項(xiàng)目
??重啟vue項(xiàng)目
??重啟nignx服務(wù) nginx -s reload
??此時(shí)在微信開發(fā)者工具中填寫公眾號(hào)線上地址就好啦(需要是http)
最后
??如果能幫到你官卡，我也沒(méi)有很開心，哈哈哈醋虏。
??如有不對(duì)的地方寻咒，還請(qǐng)指正。
