天天看點

vue 打包部署nginx,重新整理頁面空白或404,js報錯

今天老闆心血來潮,準備部署一版連雛形還沒有的項目給甲方爸爸看看,遂停下手中的活,切換生産環境,所有代碼縷一縷,盡量做到頁面好(bu)看(diu)些(ren),打包交給運維部署。

然後就在測試過程中,發現兩個問題,一級頁重新整理會報404,二級頁重新整理js報錯頁面空白。

由于這次和公司一個老前端合作開發,趨于壓力,自己之前搭的一套vue架構不能用了,老前端大哥必須自己架構(沒有實際vue開發經驗),遂在網上找了一個架構,結構混亂,拼湊感明顯,但是也懶得說了,用呗,就是白瞎了vue ui這麼好用的可視化工具。抱着最後肯定會出問題的心理推進開發工作,果不其然,上述問題出現了,大哥解決不了。運維跟群裡說我之前自己開發的那兩個項目都沒有出現過這種問題,然後就順理成章地讓我解決這次的問題。來吧

之前自己搞的項目都是預設的hash模式,查了一下資料history模式就是會出現很多問題,是以貼出來加深一下印象

  • 一級頁重新整理報404

這個問題是在官網找到答案的,404時,設定重定向到index.html,幾種部署方式都有例子。

原文連結:https://router.vuejs.org/zh/guide/essentials/history-mode.htm

vue 打包部署nginx,重新整理頁面空白或404,js報錯
  • 二級路由重新整理js報錯,頁面空白

修改圖示位置,預設所有靜态資源從根目錄開始找

vue 打包部署nginx,重新整理頁面空白或404,js報錯

繼續閱讀