问题引入:

在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文件,更加高级一些,我会再下个文章中介绍。

Logo

前往低代码交流专区

更多推荐