詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用
本文介紹了如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用,分享給大家,具體如下:
修改的webpack配置文件
全局配置
修改 webpack.base.conf.js
打開(kāi) ~\build\webpack.base.conf.js ,找到entry,添加多入口
entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', },
運(yùn)行、編譯的時(shí)候每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)Chunk
run dev 開(kāi)發(fā)環(huán)境
修改 webpack.dev.conf.js
打開(kāi) ~\build\webpack.dev.conf.js ,在plugins下找到new HtmlWebpackPlugin,在其后面添加對(duì)應(yīng)的多頁(yè),并為每個(gè)頁(yè)面添加Chunk配置
chunks: ['app']中的app對(duì)應(yīng)的是webpack.base.conf.js中entry設(shè)置的入口文件
plugins:[ // https://github.com/ampedandwired/html-webpack-plugin // 多頁(yè):index.html → app.js new HtmlWebpackPlugin({ filename: 'index.html',//生成的html template: 'index.html',//來(lái)源html inject: true,//是否開(kāi)啟注入 chunks: ['app']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }), // 多頁(yè):index2.html → app2.js new HtmlWebpackPlugin({ filename: 'index2.html',//生成的html template: 'index2.html',//來(lái)源html inject: true,//是否開(kāi)啟注入 chunks: ['app2']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }), // 多頁(yè):index3.html → app3.js new HtmlWebpackPlugin({ filename: 'index3.html',//生成的html template: 'index3.html',//來(lái)源html inject: true,//是否開(kāi)啟注入 chunks: ['app3']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }) ]
run build 編譯
修改 config/index.js
打開(kāi)~\config\index.js,找到build下的index: path.resolve(__dirname, '../dist/index.html'),在其后添加多頁(yè)
build: { index: path.resolve(__dirname, '../dist/index.html'), index2: path.resolve(__dirname, '../dist/index2.html'), index3: path.resolve(__dirname, '../dist/index3.html'), },
修改 webpack.prod.conf.js
打開(kāi)~\build\webpack.prod.conf.js,在plugins下找到new HtmlWebpackPlugin,在其后面添加對(duì)應(yīng)的多頁(yè),并為每個(gè)頁(yè)面添加Chunk配置
HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對(duì)應(yīng)的 build
plugins: [ // 多頁(yè):index.html → app.js new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }), // 多頁(yè):index2.html → app2.js new HtmlWebpackPlugin({ filename: config.build.index2, template: 'index2.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app2']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }), // 多頁(yè):index3.html → app3.js new HtmlWebpackPlugin({ filename: config.build.index3, template: 'index3.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app3']//需要引入的Chunk,不配置就會(huì)引入所有頁(yè)面的資源 }), ]
如果頁(yè)面比較多,可以考慮使用循環(huán)將 HtmlWebpackPlugin 添加到 plugins
// utils.js exports.getEntry = function(globPath, pathDir) { var files = glob.sync(globPath); var entries = {}, entry, dirname, basename, pathname, extname; for (var i = 0; i < files.length; i++) { entry = files[i]; dirname = path.dirname(entry); extname = path.extname(entry); basename = path.basename(entry, extname); pathname = path.join(dirname, basename); pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname; entries[pathname] = ['./' + entry]; } return entries; }
// webpack.base.conf.js var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/')); pages.forEach(function (pathname) { // https://github.com/ampedandwired/html-webpack-plugin var conf = { filename: '../views/' + pathname + '.html', //生成的html存放路徑,相對(duì)于path template: '../src/views/' + pathname + '.html', //html模板路徑 inject: false, //js插入的位置,true/'head'/'body'/false /* * 壓縮這塊,調(diào)用了html-minify,會(huì)導(dǎo)致壓縮時(shí)候的很多html語(yǔ)法檢查問(wèn)題, * 如在html標(biāo)簽屬性上使用{{...}}表達(dá)式,所以很多情況下并不需要在此配置壓縮項(xiàng), * 另外,UglifyJsPlugin會(huì)在壓縮代碼的時(shí)候連同html一起壓縮。 * 為避免壓縮html,需要在html-loader上配置'html?-minimize',見(jiàn)loaders中html-loader的配置。 */ // minify: { //壓縮HTML文件 // removeComments: true, //移除HTML中的注釋 // collapseWhitespace: false //刪除空白符與換行符 // } }; if (pathname in config.entry) { conf.favicon = 'src/images/favicon.ico'; conf.inject = 'body'; conf.chunks = ['vendors', pathname]; conf.hash = true; } config.plugins.push(new HtmlWebpackPlugin(conf)); });
同樣入口 entry 也可以使用
// webpack.base.conf.js entry: { app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/') },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue 單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的優(yōu)劣
- vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解
- webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法
- 詳解vue-cli3多頁(yè)應(yīng)用改造
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用
- 詳解Vue CLI3 多頁(yè)應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- 手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法
- Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄
- vue 如何從單頁(yè)應(yīng)用改造成多頁(yè)應(yīng)用
相關(guān)文章
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中,如果圖片較多,篇幅太長(zhǎng),就會(huì)比較煩惱,接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下2018-08-08vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
這篇文章主要給大家介紹了vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能的相關(guān)資料,文中包含vue-pdf插件用法,在前端開(kāi)發(fā)中,很多時(shí)候我們需要進(jìn)行pdf文件的預(yù)覽操作,需要的朋友可以參考下2023-07-07Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解
這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-115分鐘學(xué)會(huì)Vue動(dòng)畫(huà)效果(小結(jié))
這篇文章主要介紹了5分鐘學(xué)會(huì)Vue動(dòng)畫(huà)效果(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn)
當(dāng)在做后臺(tái)管理系統(tǒng)的時(shí)候,會(huì)用到用戶(hù)的狀態(tài)管理這個(gè)功能,本文主要介紹了element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07