（六）构建实战2-多页面应用的配置

今天是周日，成都降了温，太冷，闲来无聊，继续整理一下笔记。上次的笔记主要是说构建单页面应用的一些相关知识点，今天突发奇想看待官网上说可以配置多页面程序，马上试一下。
首先，说一下很多时候我们使用SPA就足够了，什么情况下使用多页面程序呢？当你的项目复杂度很高或者模块之间的差异变化非常大，完全无法复用，这个时候是不是思考一下多页面应用。下边记录一下探索多页面应用过程。

1、概念

多页面应用程序，就说说有多个单页面应用程序构成的应用，其实就是有一个个完整的html文件组成的应用。还不不不懂。没关系，画个图。

那么思考一下，单页面应用程序都有一个入口文件，路由等等，多页面应用肯定就是有多个了，总结一下就是一句话：多页面应用的每个单页面都可以拥有单页面应用src目录下的文件及功能，下边我就要做一个简单多页面应用（一个是应用首页，一个是主页主页）。
二话不说线上目录结构：

目录一目了然，我就不多废话了，其实和单页面应用的结构很相似，只是多了一些配置而已。几个地方我们要仔细讲解一下；

2、多入口

啥意思呢？就是说我们应用可能要有多个入口，vue-cli默认的入口文件是main.js，但是到了多页面应用中可以任意命名你的入口文件，这里懒得去想那些名字，还是使用默认的命名入口文件；
2.1、首先我们要先配置多入口文件
我们打开你的webpack.base.con.js文件，找到entry配置，进行配置。

2.2、配置多入口依赖
这里一定要记住，多页面应用会含有多个配置依赖，我们看一下vue-cli3.x的配置文档，明确说明了

什么意思呢？意思就是你需要配置多个html-webpack-plugin配置，可能你还没明白，首先找到webpack.dev.conf.js 文件添加一个该配置：

在添加配置之前千万不要忘记在默认的配置中添加chunks配置。
再次找到webpack.prod.conf.js 文件添加与dev模式一致的配置即可
2.3、分离入口文件
这个没啥技术含量，这里就不多说了。直接上图

下边详细说明多模板

3、多模板

其实多模板就是说多个页面有多个html模板；各自单页面应用使用各自对应的模板，怎么体现配置多模板呢，其实还是在htmlWebpackPlugin的配置中体现。

目录机构调整一下：

4、多路由

配置单个页面应用各自的路由管理，并且在不同的路由中编写各自的管理逻辑

接下来各自的页面也处理一下内部的逻辑。

5、呈现

万事具备，就差我们来验证一下了，首先我们先把项目运行起来了；发现项目自动打开了；

这里是我们的项目进入了Hello这个页面。我们再看一下访问home这个页面的应用是否可以正常展示。

破费。

总结

本次笔记主要是记录构建实战中的多页面应用配置，发现其实还是很简单，主要是做配置，另外就是要细心。