admin管理员组文章数量:1633739
vue-cli2 配置多入口
- 一、多入口配置场景
- 二、实现步骤
- 1.新建入口文件并修改
- 2.配置文件修改
- 总结
一、多入口配置场景
需求为同一工程中设置两个入口，两个入口对应两个系统，系统界面风格、路由守卫、路由均可独立使用
二、实现步骤
1.新建入口文件并修改
- entry.html (根目录)
- entry.vue (src目录)
- entry.js(src目录)
entry.html 修改代码如下(为新入口定义新的id本文以entry为例)
<body>
<div id="entry"></div>
</body>
entry.js修改代码如下(挂载文件id改为新改的entry):
new Vue({...}).$mount('#entry')
2.配置文件修改
主要有四个需要修改的文件
- build>webpack.base.conf.js
- build>webpack.prod.conf.js
- build>webpack.dev.conf.js
- config>index.js
webpack.base.conf.js 代码如下（示例）：
entry:{
app: path.resolve(__dirname,'../src/main.js'),
entry1:path.resolve(__dirname,'../src/entry.js')
}
webpack.prod.conf.js 找到 new HtmlWebpackPlugin({})方法结尾部分另起一行增加代码如下（示例）：
new HtmlWebpackPlugin({
filename:'entry.html',
template:'entry.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
chunks:['manifest','vendor','entry']
})
// 这部分可以将原来index.html的 new HtmlWebpackPlugin({})方法拷贝下来,将entry替换为你自己新建的入口html文件名称
webpack.base.conf.js 代码如下（主要用于本地dev环境调试）：
new HtmlWebpackPlugin({
filename:'entry.html',
template:'entry.html',
inject: true,
chunks:['entry']
})
config>index.js 代码如下（主要用于本地dev环境调试）：
// 找到build配置部分增加新入口文件配置
build:{
...
index:path.resolve(__dirname,'../dist/index.html');
entry:path.resolve(__dirname,'../dist/index.html');//新增本行代码
...
}
总结
本文以两个入口文件为例，多个可自行添加，或者使用golb插件做处理此处不在补充
如需快速验证可npm i -g live-server 安装live-server插件，npm run build后进入dist文件夹执行live-server --port 8888验证
验证方法：
运行环境验证地址栏输入：
localhost:8080/index.js
localhost:8080/entry.js
运行环境验证地址栏输入：
本地IP:8888/index.js
本地IP:8888/entry.js
版权声明：本文标题：vue-cli2 配置多入口 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729174920a1188592.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论