Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法
一. 需求分析
為另一個(gè)項(xiàng)目提供可嵌入的功能單頁(yè),大部分頁(yè)面使用時(shí)都是獨(dú)立功能頁(yè),個(gè)別頁(yè)面帶有左側(cè)邊欄(相當(dāng)于3-4個(gè)頁(yè)面的整合形態(tài)),由于資源定位地址的限定,每個(gè)頁(yè)面打包為單頁(yè)后,入口html
文件需要定制命名,且腳本和樣式文件需要放在指定的路徑下,公共資源地址也必須替換成特殊字符以適配母系統(tǒng)的調(diào)用邏輯(比如下面結(jié)構(gòu)中應(yīng)用jquery.min.js
的路徑可能是{{publicRoot}}/{{publicLib}}/jquery.minjs
)。假設(shè)原工程中擁有AB這2個(gè)舊頁(yè)面,現(xiàn)在需要開(kāi)發(fā)CDE這3個(gè)頁(yè)面,目錄結(jié)構(gòu)要求如下:
藍(lán)色部分為舊資源,綠色部分為新開(kāi)發(fā)需求。
二. 原方案分析
原方案采用Vue+ElementUI
進(jìn)行開(kāi)發(fā),構(gòu)建過(guò)程基本是零配置的,開(kāi)發(fā)效率非常高,頁(yè)面風(fēng)格也統(tǒng)一,但零配置的構(gòu)建過(guò)程只能生成SPA
模式的應(yīng)用,所以原方案的做法是:
將構(gòu)建過(guò)程中需要定制的量提取到config.js
文件中進(jìn)行統(tǒng)一管理,大致形式如下:
//config.js module.exports = { A:{ publicPath:'{{publicRoot}}/{{publicLib}}' prodFileName:'A.html', entryKey:'public/A', entryPath:'public/A/A.js' }, B:{ //... } //... }
開(kāi)發(fā)過(guò)程中使用統(tǒng)一的路由文件router.js
,打包過(guò)程中在main.js
中引用對(duì)應(yīng)頁(yè)面的XX.router.spa.js
作為路由,而將其他頁(yè)面注釋掉,打包時(shí)傳入命令行參數(shù)--key=XXX
,key
值在打包腳本中被解析后從config.js
中取出打包需要的設(shè)置參數(shù),然后將目標(biāo)頁(yè)面打包為獨(dú)立頁(yè)面,其他頁(yè)面雖然也在工程中,但并不參與打包。
// 入口文件src/main.js import router from './pages/C/router.spa'; //import router from './pages/D/router.spa'; //import router from './pages/E/router.spa';
上述打包過(guò)程在使用中出現(xiàn)了很多問(wèn)題:
- 公共依賴沒(méi)有剝離,
vue
和ElementUI
會(huì)被打包進(jìn)每一個(gè)單頁(yè)面,使得每個(gè)打包出的index.js
幾乎有1.2MB大小,這種空間浪費(fèi)是沒(méi)必要的。 - 公共樣式?jīng)]有形成獨(dú)立文件,這使得每當(dāng)有樣式細(xì)節(jié)發(fā)生變更,就需要手動(dòng)將每個(gè)頁(yè)面逐一進(jìn)行重新出包。
- 頁(yè)面增多后在
main.js
中會(huì)有很多獨(dú)立路由,如果開(kāi)發(fā)中進(jìn)行了跨頁(yè)面修改,很可能在main.js
中激活的路由為C頁(yè)面路由時(shí),打包時(shí)--key
參數(shù)的值卻傳成了D
,這種情況并不會(huì)引起報(bào)錯(cuò),但事實(shí)上構(gòu)建結(jié)果確實(shí)錯(cuò)誤的。 - 由于入口文件保持
main.js
沒(méi)有變化,所以在不同頁(yè)面打包時(shí),結(jié)果都輸出在dist
目錄下,需要手動(dòng)與母工程中的地址去匹配,操作繁瑣。
三. 多頁(yè)面改造3步走
上面的問(wèn)題實(shí)際上都是因?yàn)樵桨笇⒁粋€(gè)多頁(yè)面開(kāi)發(fā)需求按照單頁(yè)面應(yīng)用來(lái)實(shí)現(xiàn)而造成的,需要對(duì)自動(dòng)化構(gòu)建工程進(jìn)行一些定制。
1.分離webpack配置
本例中開(kāi)發(fā)環(huán)境和最終打包的主要差異在于路由上,開(kāi)發(fā)中由于可能需要進(jìn)行跨頁(yè)面開(kāi)發(fā),可以使用單入口和獨(dú)立路由,而進(jìn)行生產(chǎn)環(huán)境構(gòu)建時(shí)則需要輸出多頁(yè)面應(yīng)用,所以首先要做的就是將原本的webpack.config.js
文件拆分為webpack.base.js
,webpack.dev.js
,webpack.prod.js
三個(gè)文件,webpack.base.js
為環(huán)境無(wú)差別的配置,然后依據(jù)構(gòu)建模式的不同,使用webpack-merge插件將環(huán)境相關(guān)的配置與基本配置進(jìn)行合并:
/*webpack.base.js示例*/ const argv = require('yargs-parser')(process.argv.slice(2)); const env_short = argv.env.all ? 'all' : argv.p ? 'prod':'dev'; const webpackConfig = require(`./config/webpack.${env_short}`);//根據(jù)-p屬性加載webpack的dev配置或prod配置 const merge = require('webpack-merge'); //基本配置 const baseConfig = { //.... } //輸出合并后的配置 module.exports = merge(baseConfig, webpackConfig);
webpack.dev.js保持原本的SPA開(kāi)發(fā)的設(shè)置即可滿足需求。
2. 抽離外部引用
本例中較大的外部應(yīng)用是vue和ElementUI,很多開(kāi)發(fā)者一直使用自動(dòng)化腳手架工具,并沒(méi)有意識(shí)到這兩個(gè)庫(kù)作為外部依賴該如何引入工程。公共庫(kù)的抽離需要在webpack配置中將其填寫(xiě)在external配置項(xiàng)中:
module.exports = { //... externals:{ vue:'Vue', 'element-ui':'ELEMENT' }, //... }
key為引用的模塊名,value為這個(gè)模塊引入后對(duì)應(yīng)的全局命名,external配置項(xiàng)的含義是:請(qǐng)不要將這個(gè)模塊注入編譯后的JS文件里,對(duì)于源代碼里出現(xiàn)的任何import/require
這個(gè)模塊的語(yǔ)句,請(qǐng)將它保留并根據(jù)模塊化標(biāo)準(zhǔn)進(jìn)行依賴方式適配 。
Tips:
Vue做為外部依賴時(shí)有很多構(gòu)建包,本例中因?yàn)槭褂脀ebpack進(jìn)行了構(gòu)建,沒(méi)有在線編譯模板的需求,所以不需要引入完整的Vue,而只需要引入壓縮后的只包含運(yùn)行時(shí)的版本vue.runtime.min.js
即可。外部引入庫(kù)時(shí)需要注意命名,比如上例中的ELEMENT,開(kāi)發(fā)者通常會(huì)填寫(xiě)為自己在代碼中使用的ElementUI而引起報(bào)錯(cuò),當(dāng)不確定名稱時(shí),有個(gè)簡(jiǎn)單的辦法就是找一個(gè)CDN的資源看一下,通常代碼最開(kāi)始都是UMD規(guī)范的固定結(jié)構(gòu),很容易看到關(guān)鍵詞(如下圖所示)。
然后將資源的CDN地址或是本地公共庫(kù)地址加入到index.html中,你可以使用模板語(yǔ)法,然后從html-webpack-plugin插件實(shí)例化時(shí)傳入定制參數(shù):
<!--html文件模板--> <body> <div id="app"></div> <script src="<%= htmlWebpackPlugin.options.vue_path %>"></script> <script src="<%= htmlWebpackPlugin.options.elementUI_path %>"></script> <script src="<%= htmlWebpackPlugin.options.tpl_entryPath %>/index.js"></script> </body> //webpack.prod.js module.exports = { //... plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html',//生成index.html時(shí)依據(jù)的模板 filename: '.....', inject:false, tpl_entryPath:'....', vue_path:'.....', elementUI_path:'.....', }), //new BundleAnalyzerPlugin() ], }
最終打包后生成的index.html文件大致如下:
<body> <div id="app"></div> <script src="{{publicRoot}}/{{publicLib}}/vue.min.js"></script> <script src="{{publicRoot}}/{{publicLib}}/element-ui.js"></script> <script src="public/A/A.js"></script> </body>
如果第三方庫(kù)從本地加載,則需要將/node_modules/element-ui/lib/index.js和/node_modules/vue/dist/vue.runtime.min.js兩個(gè)依賴文件拷貝到lib文件夾中的對(duì)應(yīng)地址,這樣訪問(wèn)index.html時(shí)就可以以外部依賴的形式將其加載進(jìn)來(lái)。樣式文件的剝離直接使用插件完成即可,webpack4以前的版本使用extract-text-webpack-plugin,從4.0版本后統(tǒng)一使用mini-css-extract-plugin。
3. 為webpack定制多入口
多入口的配置是多頁(yè)面應(yīng)用打包的關(guān)鍵,由于打包結(jié)果存在嵌套目錄,所以需要對(duì)entry對(duì)象的鍵值進(jìn)行一些定制,打包后的路徑信息是直接通過(guò)key值來(lái)定制的,同時(shí)需要實(shí)例化多個(gè)HtmlWebpackPlugin來(lái)為每一個(gè)入口文件生成一個(gè)對(duì)應(yīng)的index.html訪問(wèn)入口,定制參數(shù)可以在實(shí)例化時(shí)傳入:
//webpack.prod.js module.exports = { entry:{ 'C/index':'./src/pages/C/C.entry.js', 'DESK/D/index':'./src/pages/D/D.entry.js', 'DESK/E/index':'./src/pages/E/E.entry.js' } //... plugins:[ new HtmlWebpackPlugin({...paramsC}), new HtmlWebpackPlugin({...paramsD}), new HtmlWebpackPlugin({...paramsE}), ] }
當(dāng)然你可以將entry或plugins數(shù)組的組裝過(guò)程剝離到其他文件中,然后直接引用:
當(dāng)然,每個(gè)頁(yè)面的入口文件X.entry.js相當(dāng)于舊方案中main.js文件中移除被注釋掉的未啟用路由信息后剩余的部分,它足以支撐每個(gè)單頁(yè)獨(dú)立被訪問(wèn)。
四. 小結(jié)
經(jīng)上述改造后,在dist目錄中輸出的結(jié)構(gòu)和需求中public目錄下的結(jié)構(gòu)就保持一致了,而且每個(gè)頁(yè)面的index.js文件也縮小到了100K左右。當(dāng)然你也可以使用node.js去編寫(xiě)一些自動(dòng)化腳本,將后續(xù)的替換過(guò)程也自動(dòng)化,或者繼續(xù)對(duì)webpack的打包過(guò)程進(jìn)行優(yōu)化,本文就不再贅述了。
以上所述是小編給大家介紹的Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹(shù)形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹(shù)形數(shù)據(jù)拖拽,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式
這篇文章主要介紹了Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vite項(xiàng)目的根目錄中的env.d.ts類(lèi)型聲明文件里要寫(xiě)什么
這篇文章主要介紹了vite項(xiàng)目的根目錄中的env.d.ts類(lèi)型聲明文件里要寫(xiě)什么,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的方法實(shí)例
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到多級(jí)導(dǎo)航這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07詳解如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過(guò)對(duì)海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來(lái)越流行,本文將介紹如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10Vue+Echart柱狀圖實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì)
這篇文章主要介紹了在Vue nuxt項(xiàng)目中,如何使用Echart(百度圖表)柱狀圖來(lái)實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計(jì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問(wèn)題
這篇文章主要介紹了ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03