最近想自己做點(diǎn)小項(xiàng)目練手，前端用的是vue框架，用nginx當(dāng)做服務(wù)器來部署。但是當(dāng)部署完成后，遇到了刷新頁面和打開新頁面報(bào)404錯(cuò)誤的問題
問題就像上面描述的一樣，刷新頁面和打開新頁面都是報(bào)404錯(cuò)誤。
先說最終解決辦法，在nginx的配置文件的location中改一下設(shè)置方式：
location / {
try_files $uri $uri/ /index.html;
}
location改為這么設(shè)置，就好了，具體原理看解決問題的帖子中解釋是：
打包后的vue是單頁面結(jié)構(gòu)，所有內(nèi)容都在index.html中渲染加載，改變請求地址后到指定目錄下必然找不到，所以會報(bào)錯(cuò)，這么設(shè)置就是所有請求都回到index.html頁面中
下面說說為了解決問題的嘗試：
- location配置路徑到vue的具體路徑中（失?。?/li>
- 云服務(wù)端口開放更多（失?。?/li>
- location配置所有請求用index跳轉(zhuǎn)到index.html（失?。?/li>
?一個(gè)個(gè)解釋失敗原因：
第一個(gè)：location配置路徑到vue的具體路徑中
這么弄主要還是因?yàn)関ue項(xiàng)目中有路由的改寫，地址欄雖然寫的是localhost:8080/a/b/c，但是vue實(shí)際跳轉(zhuǎn)時(shí)候已經(jīng)改寫為：localhost:8080/d/e/f了，所以當(dāng)時(shí)以為這就可以了，然而看到打包后的dist文件夾后就知道不對了
第二個(gè)：云服務(wù)端口開放更多
這里開放更多端口，主要還是后期找太久問題找的有點(diǎn)蒙了。。。其實(shí)端口開放與否與404沒有關(guān)系的
第三個(gè)：location配置所有請求用index跳轉(zhuǎn)到index.html
這是距離實(shí)際成功最近的一回，只是用方式了，想法是對的
location配置中index和try_files是有些不同的
index：主要作用是當(dāng)沒有訪問任何文件時(shí)，默認(rèn)訪問后面指定的文件，如果想訪問的不存在，要么先訪問location / {}，要么跳轉(zhuǎn)到指定的錯(cuò)誤頁面
try_files：主要作用是找到并訪問指定目錄下的某個(gè)文件，配置中用$uri 和 $uri/代表所有訪問請求都回到這個(gè)index.html
不過理論上原來我設(shè)置的是：文章來源：http://www.zghlxwxcb.cn/news/detail-582023.html
location / {
root html;
index index.html index.htm;
}
感覺也應(yīng)該可以的?。窟€是理解有點(diǎn)淺了，持續(xù)學(xué)習(xí)吧文章來源地址http://www.zghlxwxcb.cn/news/detail-582023.html
到了這里，關(guān)于Vue項(xiàng)目nginx服務(wù)器部署刷新頁面404錯(cuò)誤的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
