成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

42. Vue、React 等前端項(xiàng)目部署，刷新 404 問題解決方案

caiyongji / 1841人閱讀

摘要：發(fā)現(xiàn)路徑下是靜態(tài)文件的目錄，不是的目錄沒有文件，就會規(guī)則，返回這樣瀏覽器拿到之后，開始加載其中的前端路由部分這時候就會在前端路由中找到匹配規(guī)則同理也可以寫在前端路由中了

首發(fā)于我的github博客, 歡迎關(guān)注
nginx 匹配的 try_file 與前端路由的優(yōu)先級問題

場景描述:

訪問www.abc.com， 之后點(diǎn)擊界面里面的logout，前端路由處理，跳轉(zhuǎn)到www.abc.com/login

但是登錄頁面刷新之后，就顯示nginx 404了

奇怪的地方就在于，為何退出的時候，重定向到/login的時候，沒有報404?

前端路由重定向到/login邏輯：this.$router.push({name: "login"});

貼下前端路由配置

  routes: [
    {
        name: "home",
        path: "/",
        component: Home,
        meta: { requiresAuth: true },
    },
    {
        path: "/login",
        name: "login",
        component: Login,
    },
    {
        path: "*",
        component: NotFound,
    }
  ]

現(xiàn)有nginx配置

location / {
   root: /var/data/static;
}

解決：

為何點(diǎn)擊退出可以正常顯示登錄頁面？

因?yàn)辄c(diǎn)擊退出，使用的redirect是前端路由this.$router.push({name: "login"});來實(shí)現(xiàn)的，這時候已經(jīng)有index.html 和相關(guān)的js了，可以直接使用前端路由跳轉(zhuǎn)到/login路由對應(yīng)的組件

為何刷新的時候顯示: nginx/404？

因?yàn)樗⑿碌臅r候，會先向服務(wù)器請求xxxx.com/login，


這時候服務(wù)器的nginx配置中沒有關(guān)于/login路徑的配置，直接報nginx/404的錯誤

如何解決？

在nginx的location /{root  xxxpath}中添加try_file: /index.html的配置

解釋：

nginx進(jìn)行匹配路徑的時候，發(fā)現(xiàn)沒有/login的路徑，便會轉(zhuǎn)到/路徑處理。


發(fā)現(xiàn)root路徑下(是靜態(tài)文件的root目錄，不是linux的root目錄)沒有login文件，就會try_file規(guī)則，返回index.html,


這樣瀏覽器拿到index.html 之后，開始加載其中的前端路由部分


這時候/login就會在前端路由中找到匹配規(guī)則

同理／404也可以寫在前端路由中了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/40324.html

相關(guān)文章

  • 前端項(xiàng)目部署

    摘要：前端項(xiàng)目部署之前很少接觸前端項(xiàng)目的部署，這次為了更全面的學(xué)習(xí)就在本機(jī)上裝了一個虛擬機(jī)上，在虛擬機(jī)上練習(xí)了如何把一個寫的項(xiàng)目部署到這個虛擬機(jī)的服務(wù)器上。 前端項(xiàng)目部署 之前很少接觸前端項(xiàng)目的部署，這次為了更全面的學(xué)習(xí)就在本機(jī)上裝了一個虛擬機(jī)上，在虛擬機(jī)上練習(xí)了如何把一個 react 寫的 spa 項(xiàng)目部署到這個虛擬機(jī)的服務(wù)器上。由于 linux 也是剛接觸不久，所以整個過程還是遇到了很多...

    Aceyclee 評論0 收藏0

  • 服務(wù)器小白的我,是如何成功將 node+mongodb 項(xiàng)目部署在服務(wù)器上并進(jìn)行性能優(yōu)化的

    摘要：前言本文講解的是做為前端開發(fā)人員，對服務(wù)器的了解還是小白的我，是如何一步步將項(xiàng)目部署在阿里云的服務(wù)器上，并進(jìn)行性能優(yōu)化，達(dá)到頁面秒內(nèi)看到，秒內(nèi)看到首屏內(nèi)容的。搭建的項(xiàng)目是采用了主流的前后端分離思想的，這里只講服務(wù)器環(huán)境搭建與性能優(yōu)化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文講解的是：做為前...

    zsy888 評論0 收藏0

  • vue、react等單頁面項(xiàng)目應(yīng)該這樣子部署到服務(wù)器

    摘要：服務(wù)端渲染等服務(wù)端渲染框架構(gòu)建的項(xiàng)目部署到服務(wù)器，并用守護(hù)程序最近好多伙伴說，我用做的項(xiàng)目本地是可以的，但部署到服務(wù)器遇到好多問題資源找不到，直接訪問頁面空白，刷新當(dāng)前路由。。。 服務(wù)端渲染：next.js、nuxt.js等服務(wù)端渲染框架構(gòu)建的項(xiàng)目部署到服務(wù)器，并用PM2守護(hù)程序 最近好多伙伴說，我用vue做的項(xiàng)目本地是可以的，但部署到服務(wù)器遇到好多問題：資源找不到，直接訪問inde...

    sumory 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<