vue-cli3建立多页面项目

开发了不少个单页面的项目，也开发了不少原生的项目，就是一直没机会开发多页面和单页面混合的项目，因而本身去查了一些资料，用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo。

首先，vue-cli3是脚手架的版本是3.x，这并非说vue已经有了3.0。Vue-cli3默认就给了多页面的配置，不须要咱们多作什么：

想了解vue-cli3的更详细的能够去官网查看：

cli.vuejs.org/zh/config/#…

这样一看，其实建立多页面项目很简单，由于已经内置了这些配置，你只要每次搭建一个页面就这边配置一条。这是一种最简单的方法。

了解到有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了，地址：

github.com/wade3po/mul…