vue 打包部署服務路徑接口報錯已解決

vue 寫好代碼后台，在本地正常運行。  打包到 服務器上，服務器訪問報服務器路徑錯誤

打包上傳服務過程省略

原理：在本地有vue的運行環境node，運行起來就可以作為一個前端服務器使用。  但是打報后，就成為靜態前端文件， 文件需要放到一台服務器上才可以運行訪問。因為在vue中用到了代理，所以我們服務器選擇也要適合代理的服務器nginx

vue 配置代碼

 

我們將打包后的代碼dist放到nginx html 目錄下，啟動nginx 

訪問報錯接口路徑未找到：404

 

 原因服務器地址接口中並沒有api,  vue中api只是代理標識作用。所以nginx 要設置同樣的api代理訪問對應的服務器

    server {
        listen       80;
        server_name  localhost;


    location /api{
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass   http://localhost:801;           #所有/api開頭的請求都會轉發到這個地址，這是我本地后端代碼地址，服務器端口是82
            index index.html;
        }

     }

重啟服務器：nginx -s reload

訪問項目 成功！

關鍵解析！！！

nginx 關鍵字配置  rewrite :  語法

rewrite ： <regex> <replacement> [flag];
regex:代表正則表達式 用來匹配 請求路徑
replacement: 替代,將該內容代替 regex(將正則匹配的內容替換成replacement);$1 替代第一個參數位置
flag: 標記 break #本條規則匹配完成即終止

rewrite ^/api/(.*)$ /$1 break;
根據以上： 將 ^/api/(.*)$ 替換成 $1 , $1 正好對應的是(.*) 等於 ^/api/(.*)$ -> (.*)
所以： http://41.111.149.11/api/blade-auth/captcha  ->  http://41.111.149.11/blade-auth/captcha
結果： http://41.111.149.11/blade-auth/captcha