vue-cli webpack多Html頁面的配置(附框架vue-webpack-multipage實例)

產生緣由：

目前使用Vue的Web應用愈來愈多，包括不少手機App都使用Vue來開發前端。可是使用官方的vue-cli webpack僅僅是單頁面，一個大一點的項目一個頁面每每是不夠的。那麼vue-cli能不能支持多Html頁面呢？答案是能夠的，那就須要咱們去改動一下webpack的配置。

 

簡介：

我把它取了個名字叫作vue-webpack-multipage，顧名思義：vue基於webpack的多頁面框架。我同時會給你們講如何基於官方的vue-cli webpack的demo上改動，也會把我修改事後的demo上傳到git共享給你們(可是不保證模塊是最新的，因此你們最好跟着教程本身配置一下)。在以前呢，我參考了其餘大佬的一些方法，而後本身總結了一下，並進行了優化。能夠支持多級目錄，至於多少級呢，這個是不限制的，因此我的認爲仍是比較智能的。本教程涉及到vue-cli原有支持須要大家本身查閱哦。

 

配置教程：

前置條件：你已經熟悉了vue-cli

 

1.建立項目

//就是你使用官方vue-cli的用法
vue init webpack 項目名

 

 

2.添加多頁面幫助工具：這是封裝的各類多頁面支持的方法，我命名爲multipage-helper.js，放在項目的build文件夾下

/**
 * 多頁面支持
 * @File:
 * @Description: 多頁面支持
 * @author qingyi xuelongqy@foxmail.com
 * @date 2017/6/15 10:16
 * @version V1.0
 */

var path = require('path')
var fs = require("fs")
var HtmlWebpackPlugin = require('html-webpack-plugin')

var moduleList          //緩存多頁面模塊列表
var moduleRootPath = './src/module' //模塊根目錄(這個能夠根據本身的需求命名)

/**
 * 獲取js入口數組
 */
exports.getEntries = function getEntries(){
  //緩存js入口數組
  var entries = {}
  //初始化模塊列表
  this.getModuleList()
  //變量模塊列表
  moduleList.forEach(function (module) {
    if (module.moduleID != "" && module.moduleJS != ""){
      entries[module.moduleID] = module.moduleJS
    }
  })
  console.log("*********************************** entries ***********************************")
  console.log(entries)
  return entries
}

/**
 * 獲取多頁面模塊列表
 * @returns {模塊的信息集合}
 */
exports.getModuleList = function getModuleList() {
  //判斷是否爲空，不爲空則直接返回
  if (moduleList){
    return moduleList
  }else {//爲空則讀取列表
    moduleList = new Array();
    readDirSync(moduleRootPath, "")
    console.log("*********************************** moduleList ***********************************")
    console.log(moduleList)
    return moduleList
  }
}

/**
 * 獲取dev的Html模板集合
 * @returns {dev的Html模板集合}
 */
exports.getDevHtmlWebpackPluginList = function getDevHtmlWebpackPluginList(){
  console.log("*********************************** devHtmlWebpackPluginList ***********************************")
  //緩存dev的Html模板集合
  var devHtmlWebpackPluginList = []
  //獲取多頁面模塊集合
  var moduleList = this.getModuleList()
  //遍歷生成模塊的HTML模板
  moduleList.forEach(function (mod) {
    //生成配置
    var conf = {
      filename: mod.moduleID+".html",
      template: mod.moduleHTML,
      chunks: [mod.moduleID],
      inject: true
    }
    console.log(conf)
    //添加HtmlWebpackPlugin對象
    devHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))
  })
  return devHtmlWebpackPluginList
}

/**
 * 獲取prod的Html模板集合
 * @returns {prod的Html模板集合}
 */
exports.getProdHtmlWebpackPluginList = function getProdHtmlWebpackPluginList(){
  console.log("*********************************** prodHtmlWebpackPluginList ***********************************")
  //緩存dev的Html模板集合
  var prodHtmlWebpackPluginList = []
  //獲取多頁面模塊集合
  var moduleList = this.getModuleList()
  //遍歷生成模塊的HTML模板
  moduleList.forEach(function (mod) {
    //生成配置
    var conf = {
      filename: mod.moduleID+".html",
      template: mod.moduleHTML,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest','vendor',mod.moduleID]
    }
    console.log(conf)
    //添加HtmlWebpackPlugin對象
    prodHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))
  })
  return prodHtmlWebpackPluginList
}

/**
 * 深度遍歷目錄，並整理多頁面模塊
 * @param path 須要變量的路徑
 * @param moduleName 模塊名稱
 */
function readDirSync(path,moduleName){
  //緩存模塊對象
  var module = {moduleID:"",moduleHTML:"",moduleJS:""}
  //獲取當前模塊ID
  var moduleID = path.replace(moduleRootPath+"/","")
  if (path == moduleRootPath){
    moduleID = ""
  }
  module.moduleID = moduleID
  //獲取目錄下全部文件及文件夾
  var pa = fs.readdirSync(path)
  pa.forEach(function(ele,index){
    var info = fs.statSync(path+"/"+ele)
    if(info.isDirectory()){
      // console.log("dir: "+ele)
      readDirSync(path+"/"+ele, ele)
    }else{
      //判斷當前模塊的html是否存在
      if (moduleName+".html" == ele){
        module.moduleHTML = path+"/"+ele
      }
      //判斷當前模塊的js是否存在
      if (moduleName+".js" == ele){
        module.moduleJS = path+"/"+ele
      }
      // console.log("file: "+ele)
    }
  })
  //判斷模塊是否真實(可能只是個分級目錄)
  if ((module.moduleID != "" && module.moduleHTML != "") || (module.moduleID != "" && module.moduleJS != "")){
    moduleList.push(module)
  }
}

 

 

3.修改webpack.base.conf.js：配置多個頁面的js入口

//**添加**
//引入多頁面支持
var multipageHelper = require('./multipage-helper')

//**修改**
module.exports = {
  entry: multipageHelper.getEntries(), //設置入口集合
  ...
}

 

 4.修改webpack.dev.conf.js：開發時的多頁面模板配置

//**添加**
//引入多頁面支持
var multipageHelper = require('./multipage-helper')

//**刪除**
//刪除module.exports中原有的HtmlWebpackPlugin配置(內容可能不同，反正HtmlWebpackPlugin就對了)
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})

//**末尾添加**
//添加Html模板集合
Array.prototype.push.apply(module.exports.plugins,multipageHelper.getDevHtmlWebpackPluginList())

 

 

5.修改webpack.prod.conf.js：編譯時的多頁面模板配置

//**添加**
//引入多頁面支持
var multipageHelper = require('./multipage-helper')

//**刪除**
//刪除webpackConfig中原有的HtmlWebpackPlugin配置(內容可能不同，反正HtmlWebpackPlugin就對了)
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
})

//**末尾添加**
//添加Html模板集合
Array.prototype.push.apply(module.exports.plugins,multipageHelper.getProdHtmlWebpackPluginList())

 

 

6.目錄結構及其使用：目錄結構有點講究，一說就懂

看圖說話

 

 我把全部的頁面放在了module下，這個呢是能夠修改的(multipage-helper.js的moduleRootPath變量)

我用commodity_info來舉例

• commodity_info.js vue的入口文件(之前的main.js)
• commodity_info.html 這就是一個Html頁面(之前的index.html)
• commodity_info.vue vue的視圖文件(之前的App.vue)

其實沒啥好說的，就是每一個頁面須要的文件封裝到同一個文件夾內。

須要注意的是：上面三個文件名須要和文件夾名字相同

編譯後文件的路徑：會把整個文件夾的內容打包成一個html。怎麼理解呢？我舉個例子就懂了，仍是commodity_info，最後會編譯爲/commodity/commodity_info.html；若是是resources就是/resources.html；若是是book就是/resources/book.html。So easy！！

多級目錄：經過上面你就知道很人性化的支持了多目錄結構了。它會一個一個目錄去遍歷，查找是否有和目錄名字相同的js、html和vue。

 

vue-webpack-multipage框架實例源碼：

若是你不太理解怎麼用，去看看代碼就知道啦。

項目地址(碼雲)：https://git.oschina.net/xuelongqy/vue-webpack-multipage.git

github地址：https://github.com/xuelongqy/vue-webpack-multipage.git

演示地址：http://114.215.136.14/VueMulti/

 

特別重要：

若是你支持個人話，記得在碼雲上捐贈我哦！！！

若是你有問題，或者想跟我討論，留言吧。也能夠到個人微博：http://weibo.com/xuelongqy