問題描述： 手頭有乙個專案是使用 vue-cli 搭建的單頁面應用。專案分為了管理平台和使用者檢視頁面，使用者檢視頁面是很簡單的頁面，但是在載入過程中，卻載入了整個應用的打包**，量重且影響了響應和體驗。我想要的效果是，檢視頁面只載入檢視頁面的**，不包含管理系統的**，因此著手將單頁面應用改造成多頁面應用，這裡分享下方法。
1、改造檔案目錄
改造前：
改造後：
assets：這裡不變，依然放置公用的靜態資源檔案；components：這裡存放應用下所有的vue元件；pages：這裡存放我們的多頁面，比如我把管理系統頁面放在index中，檢視頁面放在view中；
pages檔案：
每個頁面下必須包含的檔案是 html/js/vue，是檔案入口，如果該頁面下包含路由，狀態管理，介面請求也放在該目錄下；
2、打包配置檔案修改
我們最後的打包檔案是這樣的，可以看到有2個html，包括資源也分開了。這是通過修改webpack配置改造的。採用的方法也是網上比較推薦的方法.
html分離：
資源分離：
2.1 修改build->utils.js
修改build資料夾下的utils.js，直接將下面的**複製在後面即可。
var glob = require('glob');
var htmlwebpackplugin = require('html-webpack-plugin');
var page_path = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 這段**的意思是根據我們`pages`下的資料夾定義webpack的入口：
exports.entries = function ()
entryfiles.foreach((filepath) => )
return map
}// 這段**是將生成的html，載入對應的資源檔案
exports.htmlplugin = function ()
if (process.env.node_env === 'production') ,
chunkssortmode: 'dependency'})}
arr.push(new htmlwebpackplugin(conf))
}) return arr
}
2.3 修改html外掛程式開啟build->webpack.prod.conf.js,先去除原來的配置：
然後再把我們剛在utils裡新增的配置加上：
然後再把我們剛在utils裡新增的配置加上：
3、頁面怎麼寫
上面的方法，網上五花八門的都介紹了，但是在實現的過程中，還是遇到了問題：這裡貼上下我實踐成功的頁面寫法，減少一些爬坑吧~
ok，這時候 npm run build 就可以打包出我們要的檔案了，訪問方法是直接輸入對應的html，如果是管理首頁，無需寫index.html，比如本地訪問檢視頁面：
4、進一步優化
這個時候我們又發現乙個問題，就是我的檢視頁面很簡單，沒有引入狀態管理，路由，ui框架，但是我們知道vue的webpack把這些第三方公共元件都打包到render.js裡面了且檔案很大會影響我們的載入速度。這裡我是將比較大的第三方庫使用了cdn方法載入，實踐證明會減少了一半的載入速度，且壓縮後的js**也小了很多了~
最後
為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦乙個前端全棧學習交流圈：866109386當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。
單頁面應用 與 多頁面應用
單頁面應用結構檢視如下 多頁面應用結構檢視如下 具體對比分析 單頁面應用 多頁面應用 組成乙個外殼頁面和多個頁面片段組成 多個完整頁面構成 資源 css,js 共用，只需在外殼部分載入 不共用，每個頁面都需要載入 重新整理方式 頁面區域性重新整理或更改 整頁重新整理 url格式 使用者體驗 頁面片段...
多頁面應用和單頁面應用
每次頁面跳轉，後端都會返回乙個新的html檔案。優點 首屏時間快，seo效果好 缺點 頁面切換慢 後端路由切換頁面 每次跳轉頁面都要發乙個http請求。只在首次載入時請求乙個html檔案，頁面切換的路由由前端完成，使用js動態地刪除和渲染頁面。優點 頁面切換快 由前端路由切換頁面 缺點 首屏時間稍慢...
多頁面應用 VS 單頁面應用
每一次頁面跳轉，後端都會返回乙個新的html檔案，優點 首屏時間快 只經歷了乙個http請求 seo效果好 缺點 頁面切換慢 進行頁面之間跳轉時，並不去載入html檔案，而是通過js動態地把當前的內容刪除掉，再去把新的頁面結構上的dom元素渲染出來。當頁面做跳轉時，不需要做html檔案的請求，節約了...