Nginx 服務部署 Vue 專案後重新整理頁面,出現 404 問題

wsAdmin發表於2019-09-25
NginxVue
1.vue-cli 3.x
2.Nginx
專案之前vue-router使用預設‘hash’模式，在本地與部署線上環境後都沒有問題，因為要去掉URL中的 ‘#’ 號，故使用‘history’路由模式，故再次部署線上環境後，首頁能正常訪問，選單內點選切換也沒有問題，但當你重新整理頁面後，則出現 404 Not Found，故在此記錄一下解決辦法
    重新整理頁面時訪問的資源在服務端找不到，因為此時vue-router設定路由地址被當作url地址，此時的地址路徑肯定不是真實存在的，所以出現404現象。

Nginx服務部署Vue專案後重新整理頁面,出現404問題

    之所以出現上面的現象，是因為在nginx配置的根目錄/www/wwwroot/ssoShuang/dist下面壓根沒有'Menu/index'這個真實資源存在，這些訪問資源都是在js裡渲染的。
服務端nginx的一開始配置如下（假設域名為：testwx.wangshibo.com）：
server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/ssoShuang/dist;
}
如上出現404的原因是由於在這個域名根目錄/www/wwwroot/ssoShuang/dist下面壓根就沒有'Menu/index'這個真實目錄存在。
在服務端nginx配置裡新增vue-route的跳轉設定（這裡首頁是index.html，如果是index.php就在下面對應位置替換），正確配置如下：
server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/ssoShuang/dist;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

重啟nginx後，問題就迎刃而解了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章