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…