簡要說明
使用vue腳手架創(chuàng)建的vue項目均為單頁面應(yīng)用。但是有時候我們也需要多頁面應(yīng)用，那該如何使用cli來配置工程呢瓤檐？看了很多教程都寫得太粗糙了，大致說清楚了娱节，但是很多細節(jié)不到位挠蛉，所以我決定自己寫一篇文章來說明用法。
Vue CLI3開發(fā)多頁面應(yīng)用
第一步
按照以往的方式用CLI創(chuàng)建vue工程肄满，此時的工程是一個單頁面的vue工程谴古。想必大家都很熟悉了。
vue create 項目名 或者 vue ui（創(chuàng)建項目圖形化界面稠歉，有點意思）
可以看一下此時新建的單頁面項目的目錄結(jié)構(gòu)：
我們會發(fā)現(xiàn)我們的項目里沒有vue.config.js這個配置文件掰担，需要手動增加。
單頁項目結(jié)構(gòu)
第二步
更改項目目錄結(jié)構(gòu)
1.新建pages文件夾（這個文件夾名字可以隨意）怒炸。
2.在pages下再新建一層目錄用來存放多頁面的模板html和入口Js文件带饱。（個人覺得這種目錄結(jié)構(gòu)會比較清晰，可以看下圖）阅羹。
目錄結(jié)構(gòu)
第三步
修改vue.config.js這個配置文件纠炮，因為是多頁面月趟，所以要配置pages。配置如下：
1.手動配置
注意:配置的filenam（也就是：about1恢口，home）可以隨意取名孝宗，但是下面設(shè)置初始入口的時候 會用到 。
module.exports = {
pages：{
about1:{
entry:"./src/pages/about1/index.js",
template:"./src/pages/about1/index.html",
filename:"index1.html",
name:"昆明愛謳科技有限公司"
},
home:{
entry:"./src/pages/home/index.js",
template:"./src/pages/home/home.html",
filename:"home1.html",
name:"昆明愛謳科技有限公司"
}
}
}
2.也可以借助glob這個庫來查找入口模板和入口js文件耕肩，如下：
注意:項目目錄結(jié)構(gòu)不同因妇，下面路徑的截取也不一樣，需要自己寫方法猿诸。
//配置pages多頁面獲取當前文件夾下的html和js
function getEntry(globPath) {
let entries = {};
glob.sync(globPath).forEach(function(entry) {
var tmp = entry.split('/').splice(-3);
entries[tmp[1]] = {
entry: 'src/' + tmp[0] + '/' + tmp[1] + '/' + 'index.js',
template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + 'index.html',
filename: tmp[1]
};
});
return entries;
}
第四步
配置入口頁面：index：上面定義的頁面的filename(也就是：about1婚被，home)
devServer: {
index:"home1.html",
open: process.platform === "darwin",
disableHostCheck: false,
host: "0.0.0.0",
port: 8088,
https: false,
hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: null // string | Object
// before: app => {}
}
第五步
運行 npm run serve 就可以看到你成功了
項目地址demo:https://github.com/zhanggenlove/vue-cli-Multiple-pages
