導讀： 本菜雞作為一個JavaScript的初學者，搞了一個Vue頁面之后想將其在生產環境中部署。但是dist之后發現生成的靜態頁面只有首頁訪問正常，其余頁面全部都是Not Found，百思不得其解。經過調查解決了問題。將自己學習和思考過程記錄下來，供后來的人一個參考。

SPA單頁談起

要想解決dist之后 not found問題，首先要理解Vue的SPA單頁特性，首先來看一下SPA定義：

單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。單頁應用程序 (SPA) 是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。

你也可以看到dist打包后的Vue文件，不管你在開發模式做了多少個路由跳轉和頁面。最后打包生成dist文件夾之后，里面只會有一個.html文件。后面的所有頁面操作全部都是通過編譯后的JavaScript來完成的。也就是說，你訪問不同的URL，頁面的渲染不是通過加載不同的html文件實現，而是通過JavaScript對index.html的不同改造實現的。

明白了上面的道理之后就可以明白，為什么在dev模式下沒問題，而生成dist之后只能訪問首頁，而其他頁面會not found了。

比如你使用的是history的路由模式，在dev模式下，你訪問不同的頁面，其實都是在app.vue下面統一跳轉和加載（因為app是掛載在index上面的，所以你可以理解成只有一個index.html，不同路由跳轉和頁面加載其實是在index.html下完成的，只是JavaScript幫我們實現了，所以你看起來好像是跳轉到很多頁面，其實只是對index.html的改造）

而在dist之后，把文件放到后端指定目錄時，后端加載文件會默認是加載index，渲染index對應的html文件，加載login，渲染login對應的html文件。但是我們根本就沒有login.html，所以會報錯404 not found。

HTML5 History 模式

明白了上面的道理之后，那么如何解決呢？官方其實給了我們答案了HTML5 History 模式，相信你看完我上面的原理解釋，可以更好地理解官方給的答案。

所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

因為我們是SPA頁面應用，只有一個index.html，所以，訪問任何其他URL，都應該返回同一個html，讓JavaScript修改HTML文件，實現頁面的加載。而不是讓后端去找尋對應URL的html文件，因為根本沒有。

最后給出一個Koa后端配置的參考解決方案：使用koa、Nginx處理vue項目的history模式

參考資料

[1] vue項目打包上線
[2] Vue+Koa2 打包后如何進行線上部署
[3] HTML5 History 模式
[4] 使用koa、Nginx處理vue項目的history模式

總結

以上是生活随笔為你收集整理的问题解决：vue dev模式没问题，dist之后页面not found的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。