问题引入:

在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

多入口配置成功!

 

Logo

前往低代码交流专区

更多推荐