vue 配置多页面应用

前言: 本文基于​<code>​vue 2.5.2​</code>​, ​<code>​webpack 3.6.0​</code>​（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）

​<code>​vue​</code>​ 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。

​​Vue多页面应用开发​​

​<code>​glob​</code>​ 模块用于查找符合要求的文件

其中，​<code>​pages​</code>​文件夹用于放置页面。 ​<code>​page1​</code>​ 和 ​<code>​page2​</code>​用于分别放置不同页面，且默认均包含三个文档: ​<code>​App.vue​</code>​, ​<code>​index.html​</code>​, ​<code>​index.js​</code>​, 这样在多人协作时，可以更为清晰地明确每个文件的含义。除此之外，此文件也可配置路由。

其中：​<code>​PAGE_PATH​</code>​ 为所有页面所在的文件夹路径，指向 ​<code>​pages​</code>​文件夹。

该方法用于生成多页面的入口对象，例如本例，获得的入口对象如下：

其中：​<code>​key​</code>​ 为当前页面的文件夹名称， ​<code>​value​</code>​ 为当前页面的入口文件名称

在 ​<code>​devWebpackConfig​</code>​ 中的 ​<code>​plugins​</code>​数组后面拼接上上面新写的​<code>​htmlPlugin​</code>​:

并删除下述代码:

做 ​<code>​webpack.dev.conf.js​</code>​ 中的类似处理:

在项目文件下新建​<code>​shell​</code>​脚本​<code>​generatePage.sh​</code>​, 并在脚本中写入下述代码：

之后在项目路径下输入下述命令:

即可在​<code>​pages​</code>​文件夹下生成一个名为​<code>​page4​</code>​的新页面。还可以通过自定义​<code>​shell​</code>​脚本的内容写入路由等，以实现定制需求。