正確姿式使用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