簡要說明

使用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