vue多页面打包配置
因业务需求中,有多页面打包的需求经个人查阅,有两种处理方式方式一vue-cli版本3.x是支持多页打包的,可以直接在webpack.config.js 中添加pages,配置比较方便pages: {index: {entry: './src/main.js',template: 'index.html',filename...
因业务需求中,有多页面打包的需求
经个人查阅,有两种处理方式
方式一
vue-cli版本3.x是支持多页打包的,可以直接在webpack.config.js 中添加pages,配置比较方便
pages: {
index: {
entry: './src/main.js',
template: 'index.html',
filename: 'index.html'
},
index2: {
entry: './src/main2.js',
template: 'index2.html',
filename: 'index2.html'
}
}
方式二
vue-cli版本2.x实现多页面打包,需要配置一些文件,亲测可用
1.修改webpack.base.conf.js,配置entry添加入口,并与Chunk(后面解释)对应
entry: {
app: './src/main.js',
app2: './src/main2.js'
}
2.修改webpack.dev.conf.js,在plugins下找到new HtmlWebpackPlugin,并为每个页面添加Chunk配置
例如:chunk [ 'app' ] 中的app对应的是上面web[ack.base.conf.js中entry设置的入口文件
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',//生成的html
template: 'index.html',//来源html
inject: true,//是否开启注入
chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
filename: 'index2.html',//生成的html
template: 'index2.html',//来源html
inject: true,//是否开启注入
chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
]
3.修改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')
}
4.修改webpack.prod.conf.js,在步骤2类似,在plugins下找到new HtmlWebpackPlugin,添加对应多页,filename中引用的是config/index.js中对应的build
plugins: [
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,不配置就会引入所有页面的资源
}),
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,不配置就会引入所有页面的资源
})
]
根据以上步骤配置完成后,重新打包即可,如需运行访问,可直接访问html页面
特此记录
更多推荐
所有评论(0)