vue-cli 开发多页应用

修改的 webpack 配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口

1
2
3
4
5
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.jsentry设置的入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'),在其后添加多页

1
2
3
4
5
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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,不配置就会引入所有页面的资源
}),
]

参考:
小凡哥视频 - 讲解 vuejs2 ,使用 vue-cli 怎么搭起 多页应用

另一种方式,使用 node 的 globa 模块:
https://github.com/jarvan4dev/vue-multi-page


如果页面比较多,可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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?-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 也可以使用

1
2
3
4
// webpack.base.conf.js
entry: {
app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Leo
  • 本文链接: https://xuebin.me/posts/4536d596.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!