一個不斷學(xué)習(xí)的前端菜鳥，歡迎指正，別噴。。。

前言

??場景: 公司公眾號線上域名后端大佬已經(jīng)配置好了，前端使用的是vue框架并引入微信-js-sdk，域名已經(jīng)確定的情況下，想要調(diào)試微信的功能就得發(fā)布到線上，然后在微信開發(fā)者工具上打開上線地址。這對于菜鳥的我，就有點難受了啊，畢竟試錯試開發(fā)（手動狗頭），打個斷點，提交一下代碼，console一下，提交一下代碼。這好家伙，這一天得多少個提交記錄。。。，還容易讓別人發(fā)現(xiàn)我菜鳥身份，哈哈哈。

步驟

一、 nginx安裝

??安裝 nginx，我電腦是Win10，所以下載的是windows版本

??下載之后復(fù)制到電腦其他地方解壓，解壓后不要不要不要直接雙擊nginx.exe，在該目錄下cmd打開黑窗口進行操作

??啟動nginx服務(wù)，別在意他是否閃一下。 start nginx

??查看任務(wù)進程是否存在，dos或打開任務(wù)管理器都行 tasklist /fi "imagename eq nginx.exe 能看到進程說明啟動成功了。

二、 修改本地host文件

??win+R 輸入 C:\WINDOWS\system32\drivers\etc 點擊回車，如果路徑不對，百度看你系統(tǒng)的路徑在哪

??記事本打開hosts文件

??在最后一行添加 127.0.0.1 gongzhonghao.com gongzhonghao.com是你公司公眾號的線上域名

三、 配置nginx

??修改nginx.conf文件

    server {
        listen   80; 
        server_name  gongzhonghao.com; // 公眾號線上地址
        location / {
            proxy_pass http://localhost:8086; //你本地vue項目啟動的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項目配置

??修改vue.config.js 我是vue-cli4，其他版本自行修改

    devServer{
        disableHostCheck: true
    }

??此步驟是為解決Invalid Host header報錯

五、 重啟項目

??重啟vue項目

??重啟nignx服務(wù) nginx -s reload

??此時在微信開發(fā)者工具中填寫公眾號線上地址就好啦(需要是http)

最后

??如果能幫到你，我也沒有很開心，哈哈哈。

??如有不對的地方，還請指正。