详解如何使用 vue-cli 开发多页应用
(编辑：jimmy 日期: 2024/11/8 浏览：3 次 )
本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下：
修改的webpack配置文件
全局配置
修改 webpack.base.conf.js
打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口
entry: {
app: './src/main.js',
app2: './src/main2.js',
app3: './src/main3.js',
},
运行、编译的时候每一个入口都会对应一个Chunk
run dev 开发环境
修改 webpack.dev.conf.js
打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置
chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件
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，不配置就会引入所有页面的资源
}),
// 多页:index2.html → app2.js
new HtmlWebpackPlugin({
filename: 'index2.html',//生成的html
template: 'index2.html',//来源html
inject: true,//是否开启注入
chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源
}),
// 多页:index3.html → app3.js
new HtmlWebpackPlugin({
filename: 'index3.html',//生成的html
template: 'index3.html',//来源html
inject: true,//是否开启注入
chunks: ['app3']//需要引入的Chunk，不配置就会引入所有页面的资源
})
]
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，在其后面添加对应的多页，并为每个页面添加Chunk配置
HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 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，不配置就会引入所有页面的资源
}),
// 多页: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，不配置就会引入所有页面的资源
}),
// 多页: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，不配置就会引入所有页面的资源
}),
]
如果页面比较多，可以考虑使用循环将 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 "htmlcode">
// 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存放路径，相对于path
template: '../src/views/' + pathname + '.html', //html模板路径
inject: false, //js插入的位置，true/'head'/'body'/false
/*
* 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
* 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
* 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
* 为避免压缩html，需要在html-loader上配置'html"htmlcode">
// webpack.base.conf.js
entry: {
app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：vue的无缝滚动组件vue-seamless-scroll实例