1. 程式人生 > >Vue脫坑(一):Vue部署在IIS上後釋出單頁面重新整理報錯提示:404

Vue脫坑(一):Vue部署在IIS上後釋出單頁面重新整理報錯提示:404

寫好的系統打包,執行指令:

npm run build

打包後會生成一個檔名為:dist資料夾,將該資料夾釋出至IIS就可以進行訪問了,但有的小夥伴會發現,單機每個頁面都可以,但是卻不能重新整理頁面,一重新整理頁面就會報錯:404  not found 

這是因為,我們將檔案打包後,與原來開發檔案各個路徑已經不同了,這是就要看看我們的路由是怎麼配置的了,網上有很多方法

解決方法一,配置nginx檔案:

server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

         access_log /var/log/testwx.log main;

         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }
}

將紅色字型複製到nginx檔案的Server中就可以,這裡配置的意思是將路徑都指向與index.html檔案,但有的小夥伴會發現自己並沒有安裝ginx伺服器,又要去下載太麻煩了,還不一定可以,於是看看第二個方法

解決方法二,檢視自己的router檔案,index.js檔案是否有配置histroy模式

model:histroy

如果沒有,可以加上這句,會發現自己訪問的子頁面路徑會多出一個‘#’,然後打包釋出重新整理單頁都麼有問題了,但是感覺路徑指向有點醜O(∩_∩)O

PS:我所遇到的坑是配置路由時將檔案指向的是絕對路徑,這個可把我給坑壞了

base:__dirname