vue將單頁面改造成多頁面應(yīng)用的方法
問題描述: 手頭有一個(gè)項(xiàng)目是使用 vue-cli
搭建的單頁面應(yīng)用。項(xiàng)目分為了管理平臺(tái)和用戶查看頁面,用戶查看頁面是很簡單的頁面,但是在加載過程中,卻加載了整個(gè)應(yīng)用的打包代碼,量重且影響了響應(yīng)和體驗(yàn)。我想要的效果是,查看頁面只加載查看頁面的代碼,不包含管理系統(tǒng)的代碼,因此著手將單頁面應(yīng)用改造成多頁面應(yīng)用,這里分享下方法。
1、改造文件目錄
改造前:
改造后:
assets
:這里不變,依然放置公用的靜態(tài)資源文件;components
:這里存放應(yīng)用下所有的vue組件;pages
:這里存放我們的多頁面,比如我把管理系統(tǒng)頁面放在index
中,查看頁面放在view
中;
pages文件:
每個(gè)頁面下必須包含的文件是 html
/js
/vue
,是文件入口,如果該頁面下包含路由,狀態(tài)管理,接口請(qǐng)求也放在該目錄下;
2、打包配置文件修改
我們最后的打包文件是這樣的,可以看到有2個(gè)html
,包括資源也分開了。這是通過修改webpack
配置改造的。采用的方法也是網(wǎng)上比較推薦的方法.
HTML分離:
資源分離:
2.1 修改build->utils.js
修改build
文件夾下的utils.js
,直接將下面的代碼復(fù)制在后面即可。
var glob = require('glob'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var PAGE_PATH = path.resolve(__dirname, '../src/pages'); var merge = require('webpack-merge'); // 這段代碼的意思是根據(jù)我們`pages`下的文件夾定義webpack的入口: exports.entries = function () { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } // 這段代碼是將生成的html,加載對(duì)應(yīng)的資源文件 exports.htmlPlugin = function () { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板來源 template: filePath, // 文件名稱 filename: filename + '.html', // 頁面模板需要加對(duì)應(yīng)的js腳本,如果不加這行則每個(gè)頁面都會(huì)引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr }
2.2 修改入口entry打開 build->webpack.base.conf.js
,替換entry
為在utils
新增的entries
:
2.3 修改html插件打開build->webpack.prod.conf.js
,先去除原來的配置:
然后再把我們剛在utils
里新增的配置加上:
3、頁面怎么寫
上面的方法,網(wǎng)上五花八門的都介紹了,但是在實(shí)現(xiàn)的過程中,還是遇到了問題:這里粘貼下我實(shí)踐成功的頁面寫法,減少一些爬坑吧~
view.html
:
view.vue
:
view.js
:
ok,這時(shí)候 npm run build
就可以打包出我們要的文件了,訪問方法是直接輸入對(duì)應(yīng)的html
,如果是管理首頁,無需寫index.html
,比如本地訪問查看頁面:
4、進(jìn)一步優(yōu)化
這個(gè)時(shí)候我們又發(fā)現(xiàn)一個(gè)問題,就是我的查看頁面很簡單,沒有引入狀態(tài)管理,路由,UI框架,但是我們知道vue的webpack把這些第三方公共組件都打包到render.js里面了且文件很大會(huì)影響我們的加載速度。這里我是將比較大的第三方庫使用了cdn
方法加載,實(shí)踐證明會(huì)減少了一半的加載速度,且壓縮后的js代碼也小了很多了~
相關(guān)文章
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥磉@個(gè)項(xiàng)目可能會(huì)加入更多的工具包,需要的朋友可以參考下2022-10-10在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09