开发了很多个单页面的项目，也开发了很多原生的项目，就是一直没机会开发多页面和单页面混合的项目，于是自己去查了一些资料，用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo。
首先，vue-cli3是脚手架的版本是3.x，这并不是说vue已经有了3.0。Vue-cli3默认就给了多页面的配置，不需要我们多做什么：
想了解vue-cli3的更详细的可以去官网查看：
这样一看，其实创建多页面项目很简单，因为已经内置了这些配置，你只要每次搭建一个页面就这边配置一条。这是一种最简单的方法。
了解到有glob这个api，于是我这边是固定了一个多页面的目录：
相当于每一个多页就是一个完整的单页，跟一个单页项目一模一样。
于是这边使用一个npm的包glob，不知道是不是帮你下载了还是node内置的对象，我是没有安装直接使用。关于glob的匹配规则和方法可以自行百度，于是创建一个vue.confg.js，里面做一些修改：
const glob = require('glob');
function creatEntry() {
let entryObj = {};
glob.sync('./src/**/index.html').forEach(val => {
let url = val.split('/')[2];
entryObj[url] = {
entry: `src/${url}/main.js`,
template: `src/${url}/index.html`,
filename: `${url}.html`,
}
});
return entryObj;
}
module.exports = {
pages: creatEntry()
}
这边为了好截取地址，规则是匹配到具体的html。顺便分享一下，当我们想要看一些node的内容，可以直接node vue.config.js查看。
运行起来之后就可以发现，当跳转另外的页面的时候是直接刷新的，但是也有一个问题，如果为了地址好看，而不是xxx.html#/user这样，就要路由模式变成history。打包可以发现结构是这样的：
因为我没有写css和图片，所以没有其他的文件夹。
我把demo上传到了git，有空感兴趣的可以下载下来跑起来看一下，当然，只是一个空项目，什么初始化css还是一些工具函数什么都没有。
项目上传git了，地址：
