vue项目配置多入口多出口——方法一

问题引入：

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

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

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

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

有两种配置方法：

先介绍一种比较笨但是好理解的方法

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

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

以Multi1为例:

1．新增HTML文件

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

3.新增.vue文件

 

• 改造webpack配置文件

1．修改webpack.base.conf.js

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

2．修改webpack.dev.conf.js

3．修改webpack.prod.conf.js

4．修改配置文件index.js

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

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

Test1.html:

Test2.html

7．测试打包情况

成功打出三个html

成功打出各自对应的js

多入口配置成功！

还有另一种方法一次配置不需要再修改webpack文件，更加高级一些，我会再下个文章中介绍。