導(dǎo)讀： 本菜雞作為一個(gè)JavaScript的初學(xué)者，搞了一個(gè)Vue頁面之后想將其在生產(chǎn)環(huán)境中部署。但是dist之后發(fā)現(xiàn)生成的靜態(tài)頁面只有首頁訪問正常，其余頁面全部都是Not Found，百思不得其解。經(jīng)過調(diào)查解決了問題。將自己學(xué)習(xí)和思考過程記錄下來，供后來的人一個(gè)參考。

SPA單頁談起

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

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

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

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

比如你使用的是history的路由模式，在dev模式下，你訪問不同的頁面，其實(shí)都是在app.vue下面統(tǒng)一跳轉(zhuǎn)和加載（因?yàn)閍pp是掛載在index上面的，所以你可以理解成只有一個(gè)index.html，不同路由跳轉(zhuǎn)和頁面加載其實(shí)是在index.html下完成的，只是JavaScript幫我們實(shí)現(xiàn)了，所以你看起來好像是跳轉(zhuǎn)到很多頁面，其實(shí)只是對(duì)index.html的改造）

而在dist之后，把文件放到后端指定目錄時(shí)，后端加載文件會(huì)默認(rèn)是加載index，渲染index對(duì)應(yīng)的html文件，加載login，渲染login對(duì)應(yīng)的html文件。但是我們根本就沒有l(wèi)ogin.html，所以會(huì)報(bào)錯(cuò)404 not found。

HTML5 History 模式

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

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

因?yàn)槲覀兪荢PA頁面應(yīng)用，只有一個(gè)index.html，所以，訪問任何其他URL，都應(yīng)該返回同一個(gè)html，讓JavaScript修改HTML文件，實(shí)現(xiàn)頁面的加載。而不是讓后端去找尋對(duì)應(yīng)URL的html文件，因?yàn)楦緵]有。

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

參考資料

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。