正确姿式使用vue cli3配置多页项目

多页面配置

咱们在使用vue cli3脚手架构建页面时，大多都是单页应用（这其中的优点我就很少说了），可是在某些场景，咱们须要构建多页应用，例如咱们咱们应用中有不少小型h5页面，或者多种活动页，这些页面互相之间没有什么关联，若是每一个活动页面都构建一个应用，那也是不切实际的，因此咱们须要使用vue脚手架构建多页应用，其中在vue-cli2.x版本配置多页须要修改的地方仍是挺繁琐，不过好在cli3版本增长了pages属性，配置起来至关轻松。

项目源码地址 multi-pages

建立多页应用

首先 vue create multi-pages 初始化名为 multi-pages 的项目，咱们删除views文件夹，新建一个名为pages 的文件夹，并建立 index 、 page1 、 page2 文件夹以下：

这里index表明了项目首页，page一、page2在这里能够理解为须要构建的其余页面，咱们能够在各自的页面文件下建立属于他们的入口文件index.js(至关于单页应用的main.js)、 router路由、组件components、vuex、axios等等，咱们就把他们每一个理解为独立的单页应用。

配置vue.config.js

在项目中建立 vue.config.js 文件来配置咱们的多页应用。话很少说，整干货：

const glob = require('glob')

function getEntry(url) {
  let entrys = {}
  glob.sync(url).forEach(item => {
    // splice(-3)取数组后三项
    let urlArr = item.split('/').splice(-3)
    entrys[urlArr[1]] = {
      entry: 'src/pages/' + urlArr[1] + '/' + 'index.js',
      template: 'src/pages/' + urlArr[1] + '/' + 'index.html',
      filename: urlArr[1] + '.html',
      title: 'pages-' + urlArr[1]
    }
  })
  return entrys
}
let pages = getEntry('./src/pages/**?/*.html')
module.exports = {
  pages
}
复制代码

这里主要用到 glob 模块来处理多页路径，这样作的好处就是不用再pages添加后文件，再来vue.config.js中添加pages对象属性，当页面多时，这是至关繁琐的，因此咱们须要借助 glob 模块，调用glob.sync(url)返回匹配到的路径数组，有关路径匹配规则，以下：

一、* ：匹配单个路径部分中的0个或多个字符。

    二、?：匹配路径中某部分1个字符。

    三、[...] ：匹配一个字符的范围，相似于一个正则表达式的范围。若是范围的第一个字符是！或者，它匹配任何不在范围内的字符。

    四、!(模式1|模式2|模式3)：匹配与所提供的任何模式不匹配的任何内容。和正则表达式的!同样。

    五、?(模式1|模式2|模式3)：匹配所提供的模式的零或一个事件。

    六、+(模式1|模式2|模式3)：匹配所提供的模式的一个或多个事件。

    七、*(a|b|c) ：匹配所提供的模式的零个或多个事件。

    八、@(pattern|pat*|pat?erN)：匹配所提供的模式之一。

    九、**：若是**在一个路径的部分，他会匹配零个或多个目录和子目录中搜索匹配。
复制代码

更多 glob相关介绍请点击查看

运行 npm run serve 输入 http:localhost:8080 跑动程序：

点击page1 、page2 都会从新请求刷新页面，最后 npm run build 打包程序：

至此vue cli3多页面配置就简单实现了，你们能够依照这个例子，在实际项目中构建更多功能！

想学习并实践开发vue项目的同窗，能够关注个人我的后台管理spa页面，项目地址 vue-admin-webapp 欢迎star，fork