vue項目打包本地后通過nginx解決跨域

前言

• 有時候我們打包好vue項目讓后端人員部署項目時可能會有小插曲，為了不麻煩后端人員和避免尷尬，最好的辦法就是在本地自己先測一下，而在本地運行打包后的項目會遇到接口跨域的問題。我平時經常用的方法就是配置nginx設置反向代理解決跨域問題。

准備過程

• 安裝nginx，具體怎么安裝部署可以參考 傳送門
• 准備打包后的vue項目
  

配置nginx

• 編輯nginx.conf 配置文件
  
  
• 在配置文件中新增一個server

#新增一個服務
    server {
        listen       8088; # 監聽的端口
        server_name  localhost;

        location / {
            root D://Thello/Project/kcgl; # vue 打包后靜態文件存放的地址 如果/后面是t開頭則要加多一個'/'
            index  index.html; # 默認主頁地址
        }

        
        location /kc {
            proxy_pass http://ip地址/kc; # 代理接口地址（此處ip地址根據自己情況更換）
        }
    }

啟動nginx

有兩種方法啟動nginx

1. 雙擊目錄下的nginx.exe
   
2. 命令行進入該文件夾，執行start nginx命令，也會直接啟動nginx服務器

啟動后會出現一個小的黑色屏幕然后馬上關閉

驗證

輸入在http://localhost會出現以下頁面，表示已經訪問成功！

改為上方自己設置的端口號

項目就已經運行起來了！！就可以愉快的測試了。

更多的nginx指令

啟動服務：start nginx
退出服務：nginx -s quit
強制關閉服務：nginx -s stop
重載服務：nginx -s reload　　（重啟，服務不會中止）
驗證配置文件：nginx -t
使用配置文件：nginx -c
使用幫助：nginx -h

在操作中如果發現運行不了nginx則先通過命令行終止再打開即可