介绍
今天就跟大家聊聊有关怎么在WebPack中配置vue多页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>项目结构:
├──建立
├──配置
├──src
│,,├──api
│,,├──资产
│,,├──组件
│,,├──页
│,,├──路由器
│,,├──跑龙套
│,,├──vuex
│,,├──App.vue
│,,├──main.js
│,,├──admin.js
│,,└──管理。vue
├──静态
│,,└──图片
├──README。md
├──管理。html
├──指数。html
├──包。json
└──纱线。锁
我相信这样的结构大家一定很熟悉,除了<代码>管理。>
我想要就是新增一个后台管理界面的入口管理。html,其他能够共用的还是共用,进入正题:
<强>修改webpack的配置文件
<强>修改webpack.base.conf。js
打开~ \ \ webpack.base.conf构建。js,找到条目,添加多入口:
条目:,{
,应用程序:& # 39;。/src/main.js& # 39;
,管理:& # 39;。/src/admin.js& # 39;,//新增
}, 这样运行编译的时候,每一个入口都会对应一个块。
<强>运行dev配置的修改
打开·~ \制造\ webpack.dev.conf.js·,在插件下找到HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加块配置如下:
new HtmlWebpackPlugin ({
,文件名:& # 39;index . html # 39;,,//生成的html
,模板:& # 39;index . html # 39;,,//来源html
,注入:真的,,
块:大敌;[& # 39;应用# 39;]//需要引入的块,不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin ({
,文件名:& # 39;admin.html& # 39;
,模板:& # 39;admin.html& # 39;
,注入:没错,
块:大敌;[& # 39;行政与# 39;]
}), <强>运行构建配置的修改
<强>修改配置/索引。js
打开~ \ config \指数。js,找到构建下的指数:路径。解决(__dirname & # 39; . ./dist/index . html # 39;),在其后添加多页:
管理:路径。解决(__dirname & # 39; . ./dist/admin.html& # 39;),
<强>修改webpack.prod.conf。js
打开~ \ \ webpack.prod.conf构建。js,在插件下找到HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加块配置:
new HtmlWebpackPlugin ({
,文件名:config.build.index,
,模板:& # 39;index . html # 39;
,注入:没错,
,贬低:{
,removeComments:没错,
,collapseWhitespace:没错,
,removeAttributeQuotes:真的
,//more 选项:
,//https://github.com/kangax/html-minifier options-quick-reference
},
,//necessary 用consistently work with multiple chunks via CommonsChunkPlugin
,chunksSortMode: & # 39;依赖# 39;
,块:[& # 39;清单# 39;,,& # 39;供应商# 39;,,& # 39;应用# 39;】
}),
new HtmlWebpackPlugin ({
,文件名:config.build.admin,
,模板:& # 39;admin.html& # 39;
,注入:没错,
,贬低:{
,removeComments:没错,
,collapseWhitespace:没错,
,removeAttributeQuotes:真的
},
,chunksSortMode: & # 39;依赖# 39;
,块:[& # 39;清单# 39;,,& # 39;供应商# 39;,,& # 39;行政与# 39;】
}), 看完上述内容,你们对怎么在WebPack中配置vue多页面有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
