Vue脫坑(一):Vue部署在IIS上後釋出單頁面重新整理報錯提示:404
阿新 • • 發佈:2019-01-30
寫好的系統打包,執行指令:
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