情況說明
nginx部署vue項目，文件放在html下的dist文件夾中
nginx.conf 文件中，server 里配置文件的位置、請求跨域等信息
本案例解決方法
在啟動項目后因為配置的是root，首先是找不到html下面的sys-test文件夾，再經(jīng)過配置修改為alias配置后，刷新又會報404錯誤，最終配置為如下，成功解決
配置解釋
為什么會出現(xiàn)404的情況
因為打包部署后，地址欄的地址只是vue的路由，并不是真的文件目錄地址。所有的路由都是依賴于SPA單頁應(yīng)用的index.html。所以當(dāng)刷新時，按照地址欄的地址，找不到對應(yīng)的文件，就產(chǎn)生404。
解決: 在nginx里進行try_files配置，讓其統(tǒng)一去查找index.html。（就是按照路徑找不到時，就去找index.html）
root 和 alias 的區(qū)別
主要區(qū)別在于nginx如何解釋location后面的uri，這會使兩者分別以不同的方式將請求映射到服務(wù)器文件上。
如以下root配置
location /sys-test {
root html;
index index.html;
}
這個去找的地方就是 root 配置的值和 location 配置的值相加，也就是去 html/sys-test 下尋找
如果是以下 alias 配置
location /sys-test {
alias html/dist;
index index.html;
try_files $uri $uri/ /dist/index.html;
}
alias 配置后，資源的路徑就是 alias 后面配置的路徑，也就是去 html/dist 下去尋找
try_files 配置的作用
try_files配置的作用 就是按順序檢查文件是否存在
配上一個簡單的例子進行解釋：文章來源：http://www.zghlxwxcb.cn/news/detail-401216.html
下面的配置意思就是:
當(dāng)我們訪問一個地址為 http://localhost:8888/sys-test/login
1. 先通過alias 確定路徑 html/dist
2. 然后通過try_files配置，首先會在html/dist下去找 $uri，也就是login這個文件
3. 這個時候因為沒有l(wèi)ogin文件，就會去找 $uri/ ，也就是 /login/ 這個文件目錄
4. 如果還是沒找到，就會將其重定向到 @router
5. 在定義的 @router 里，我們將其都指向 /dist 文件夾下的 index.html。這樣就成功解決問題！
/*
location /sys-test {
alias html/dist/;
index index.html;
try_files $uri $uri/ /dist/index.html;
// $uri 代表訪問的文件地址
// $uri/ 代表訪問的文件目錄
}
*/
location /sys-test {
alias html/dist/;
index index.html;
try_files $uri $uri/ @router;
// $uri 代表訪問的文件地址
// $uri/ 代表訪問的文件目錄
}
location @router {
rewrite ^.*$ /dist/index.html;
// 匹配所有 /dist/index.html;
}
友情提示
如若是自行配置nginx時，遇到一些問題，可先找到logs文件夾下的error.log文件，查看錯誤信息，定位錯誤原因，進行調(diào)整或百度文章來源地址http://www.zghlxwxcb.cn/news/detail-401216.html
到了這里，關(guān)于nginx 部署vue項目，路由模式為history時，頁面刷新404問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
