vue-cli2 配置多入口

福小娟儿

已于 2023-02-15 17:32:20 修改

阅读量1k

点赞数 2

分类专栏： vue-cli2 webpack多入口配置文章标签： webpack vue.js javascript 前端

于 2023-02-15 17:10:27 首次发布

本文链接：https://blog.csdn.net/qq_40969782/article/details/129045294

版权

vue-cli2 webpack多入口配置专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue-cli2 配置多入口

一、多入口配置场景
二、实现步骤
- 1.新建入口文件并修改
- 2.配置文件修改
总结

一、多入口配置场景

需求为同一工程中设置两个入口，两个入口对应两个系统，系统界面风格、路由守卫、路由均可独立使用

二、实现步骤

1.新建入口文件并修改

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