vue项目配置多入口多出口【转载】

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/localhost_1314/article/details/85106002

问题引入：

在vue项目中，我们通常使用vue-cli脚手架生成项目，生成的是一个单页面的工程，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。

但是，有时候，这种默认结构不能满足项目需要

1. 大项目使用单页面负载过重
2. 多页面利于模块独立部署

所以，我们需要将项目配置成多入口多出口模式

配置方法：

• 修改脚手架生成的目录结构如下：

其中view文件夹中放置新增的多页面

以Multi1为例:

1．新增HTML文件

2.为该页面新增一个专属的入口文件，注意id保持一致

3.新增.vue文件

• 在utils.js中新增工具函数，动态读取view文件夹中的入口文件名称

• 改造webpack配置文件

1．修改webpack.base.conf.js

原来只有main.js一个入口文件,现在我们需要将新增的Muiti1中的Test1.js和Muiti2中的Test2.js也放入入口文件配置处，修改entry配置，读取所有入口文件

2．修改webpack.dev.conf.js

3．修改webpack.prod.conf.js

4．配置完成，运行项目，打开默认页面，这是单页面

5.下面，测试另两个单独入口的页面生成成功与否，输入如下地址,页面显示成功

Test1.html:

Test2.html

6．测试打包情况

成功打出三个html

成功打出各自对应的js

多入口配置成功！