13518219792
今天就跟大家聊聊有关怎么在WebPack中配置vue多页面，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
10年的市中网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整市中建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“市中网站设计”,“市中网站推广”以来，每个客户项目都认真落实执行。
项目结构：
├── build
├── config
├── src
│ ├── api
│ ├── assets
│ ├── components
│ ├── pages
│ ├── router
│ ├── utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├── admin.js
│ └── Admin.vue
├── static
│ └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── yarn.lock
我相信这样的结构大家一定很熟悉，除了 admin.html 和src文件夹下面的 Admin.vue 、 admin.js ，还有一些api，pages，vuex等文件夹，就是最常见的一个vue-cli初始化的项目结构。
我想要就是新增一个后台管理界面的入口admin.html，其他能够共用的还是共用，进入正题：
修改webpack的配置文件
修改 webpack.base.conf.js
打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口:
entry: {
app: './src/main.js',
admin: './src/admin.js' //新增
},这样运行编译的时候，每一个入口都会对应一个chunk。
run dev配置的修改
打开 ·~\build\webpack.dev.conf.js· ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加对应的多页，并为每个页面添加Chunk配置如下:
new HtmlWebpackPlugin({
filename: 'index.html', //生成的html
template: 'index.html', //来源html
inject: true,
chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
filename: 'admin.html',
template: 'admin.html',
inject: true,
chunks: ['admin']
}),run build配置的修改
修改config/index.js
打开 ~\config\index.js ，找到build下的 index: path.resolve(__dirname, '../dist/index.html') ，在其后添加多页:
admin: path.resolve(__dirname, '../dist/admin.html'),
修改 webpack.prod.conf.js
打开 ~\build\webpack.prod.conf.js ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加对应的多页，并为每个页面添加Chunk配置:
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']
}),
new HtmlWebpackPlugin({
filename: config.build.admin,
template: 'admin.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'admin']
}),看完上述内容，你们对怎么在WebPack中配置vue多页面有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
