vue-cli+webpack搭建一个多页面应用

什么是单页面应用和多页面应用？

SPA单页面应用：指的是只有一个主页面的应用（只有一个html页面），项目启动时加载主页面时会一次性加载所有的js、css等相关资源（需要进行首屏优化）。所有内容都包含在主页面中，对每一个功能模块组件化。单页面的跳转实质上就是切换相关组件，仅仅刷新局部资源。
MPA多页面应用：指的是有多个独立的页面（多个HTML页面），打开不同的页面时会加载相关的js以及css资源，公共资源会重复加载。多页面应用跳转，需要整个页面进行刷新。

单页面和多页面的区别

1、刷新方式

• SPA：相关组件的切换，页面局部刷新；
• MPA：整个页面进行刷新。

2、路由模式

• SPA：可以使用hash，也可以使用history；
• MPA：普通链接跳转。

3、用户体验

• SPA：页面片段间切换快，用户体验效果好，但初次加载文件过多，需要做相关优化；
• MPA：页面切换缓慢，流畅度不够，用户体验效果较差；

4、数据传递

• SPA：容易实现数据传递（路由带参数传值、Vuex传值等）；
• MPA：依赖url传值、cookie、本地session。

5、使用范围

• SPA：高要求的体验度，追求界面流畅的应用；
• MPA：适用于追求高度支持搜索引擎的应用。

如何使用vue-cli+webpack初始化一个项目？

1、使用vue init webpack "项目名"

2、完成后，使用cd "项目文件名" 及 npm isntall 安装依赖，最后使用npm run dev启动项目。

vue-cli+webpack搭建多页面应用

有了上面的概念以及项目基础搭建，我们可以在vue-cli脚手架搭建的SPA项目上做一些修改，使其变成MPA应用。

项目结构调整

首先，可以创建一下下面红色方框的目录结构，需要注意的是我们需要把mian.js文件改名为index.js，保证页面入口js文件和模板文件名保持一致，上面红色方框的文件是webpack初始化的文件。

webpack配置更改

1、在build/utils.js中我们添加两个方法，分别为多入口文件和多页面输出。

const path = require('path')
const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages');
const HtmlWebpackPlugin = require('html-webpack-plugin');   //对每个页面单独打包生成一个新页面的插件
const merge = require('webpack-merge')

// 多入口配置
exports.entries = function() {
   
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {
   }
  entryFiles.forEach((filePath) => {
   
    // /index.js
    var filename = filePath.