詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用
本文介紹了如何使用 vue-cli 開發(fā)多頁應(yīng)用,分享給大家,具體如下:
修改的webpack配置文件
全局配置
修改 webpack.base.conf.js
打開 ~\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 開發(fā)環(huán)境
修改 webpack.dev.conf.js
打開 ~\build\webpack.dev.conf.js ,在plugins下找到new HtmlWebpackPlugin,在其后面添加對(duì)應(yīng)的多頁,并為每個(gè)頁面添加Chunk配置
chunks: ['app']中的app對(duì)應(yīng)的是webpack.base.conf.js中entry設(shè)置的入口文件
plugins:[
// https://github.com/ampedandwired/html-webpack-plugin
// 多頁:index.html → app.js
new HtmlWebpackPlugin({
filename: 'index.html',//生成的html
template: 'index.html',//來源html
inject: true,//是否開啟注入
chunks: ['app']//需要引入的Chunk,不配置就會(huì)引入所有頁面的資源
}),
// 多頁:index2.html → app2.js
new HtmlWebpackPlugin({
filename: 'index2.html',//生成的html
template: 'index2.html',//來源html
inject: true,//是否開啟注入
chunks: ['app2']//需要引入的Chunk,不配置就會(huì)引入所有頁面的資源
}),
// 多頁:index3.html → app3.js
new HtmlWebpackPlugin({
filename: 'index3.html',//生成的html
template: 'index3.html',//來源html
inject: true,//是否開啟注入
chunks: ['app3']//需要引入的Chunk,不配置就會(huì)引入所有頁面的資源
})
]
run build 編譯
修改 config/index.js
打開~\config\index.js,找到build下的index: path.resolve(__dirname, '../dist/index.html'),在其后添加多頁
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
打開~\build\webpack.prod.conf.js,在plugins下找到new HtmlWebpackPlugin,在其后面添加對(duì)應(yīng)的多頁,并為每個(gè)頁面添加Chunk配置
HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對(duì)應(yīng)的 build
plugins: [
// 多頁: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ì)引入所有頁面的資源
}),
// 多頁: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ì)引入所有頁面的資源
}),
// 多頁: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ì)引入所有頁面的資源
}),
]
如果頁面比較多,可以考慮使用循環(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語法檢查問題,
* 如在html標(biāo)簽屬性上使用{{...}}表達(dá)式,所以很多情況下并不需要在此配置壓縮項(xiàng),
* 另外,UglifyJsPlugin會(huì)在壓縮代碼的時(shí)候連同html一起壓縮。
* 為避免壓縮html,需要在html-loader上配置'html?-minimize',見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īng)用和多頁應(yīng)用的優(yōu)劣
- vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解
- webpack4.0+vue2.0利用批處理生成前端單頁或多頁應(yīng)用的方法
- 詳解vue-cli3多頁應(yīng)用改造
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
- 詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- 手把手教你vue-cli單頁到多頁應(yīng)用的方法
- Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐記錄
- vue 如何從單頁應(yīng)用改造成多頁應(yīng)用
相關(guān)文章
vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
這周工作中遇見了一個(gè)表格動(dòng)態(tài)列的需求,下面這篇文章主要給大家介紹了關(guān)于vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Vue3+Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
貪吃蛇作為一個(gè)經(jīng)典的小游戲,是很多人兒時(shí)的記憶,當(dāng)時(shí)的掌機(jī)、諾基亞手機(jī)里面都有它的身影。本文將用Vue3?Canvas來復(fù)刻一下這款游戲,感興趣的可以了解一下2022-07-07
vue監(jiān)聽頁面滾動(dòng)到某個(gè)高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動(dòng)到某個(gè)高度觸發(fā)事件流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說明
這篇文章主要介紹了Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
Vue props中Object和Array設(shè)置默認(rèn)值操作
這篇文章主要介紹了Vue props中Object和Array設(shè)置默認(rèn)值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版,50行js代碼實(shí)現(xiàn)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11

