Chemmy's Blog

vue-cli webpack多Html页面的配置(附框架vue-webpack-multipage实例) - 青忆qingyi - 博客园

Excerpt

目前使用Vue的Web应用越来越多，包括很多手机App都使用Vue来开发前端。但是使用官方的vue-cli webpack仅仅是单页面，一个大一点的项目一个页面往往是不够的。那么vue-cli能不能支持多Html页面呢？答案是可以的，那就需要我们去改动一下webpack的配置。

---

产生原因：

目前使用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.创建项目

<span>//</span><span>就是你使用官方vue-cli的用法</span>
vue init webpack 项目名

2.添加多页面帮助工具：这是封装的各种多页面支持的方法，我命名为multipage-helper.js，放在项目的build文件夹下

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

<span>var</span> path = require('path'<span>)
</span><span>var</span> fs = require("fs"<span>)
</span><span>var</span> HtmlWebpackPlugin = require('html-webpack-plugin'<span>)

</span><span>var</span> moduleList          <span>//</span><span>缓存多页面模块列表</span>
<span>var</span> moduleRootPath = './src/module' <span>//</span><span>模块根目录(这个可以根据自己的需求命名)</span>

<span>/*</span><span>*
 * 获取js入口数组
 </span><span>*/</span><span>
exports.getEntries </span>= <span>function</span><span> getEntries(){
  </span><span>//</span><span>缓存js入口数组</span>
  <span>var</span> entries =<span> {}
  </span><span>//</span><span>初始化模块列表</span>
  <span>this</span><span>.getModuleList()
  </span><span>//</span><span>变量模块列表</span>
  moduleList.forEach(<span>function</span><span> (module) {
    </span><span>if</span> (module.moduleID != "" &amp;&amp; module.moduleJS != ""<span>){
      entries[module.moduleID] </span>=<span> module.moduleJS
    }
  })
  console.log(</span>"*********************************** entries ***********************************"<span>)
  console.log(entries)
  </span><span>return</span><span> entries
}

</span><span>/*</span><span>*
 * 获取多页面模块列表
 * @returns {模块的信息集合}
 </span><span>*/</span><span>
exports.getModuleList </span>= <span>function</span><span> getModuleList() {
  </span><span>//</span><span>判断是否为空，不为空则直接返回</span>
  <span>if</span><span> (moduleList){
    </span><span>return</span><span> moduleList
  }</span><span>else</span> {<span>//</span><span>为空则读取列表</span>
    moduleList = <span>new</span><span> Array();
    readDirSync(moduleRootPath, </span>""<span>)
    console.log(</span>"*********************************** moduleList ***********************************"<span>)
    console.log(moduleList)
    </span><span>return</span><span> moduleList
  }
}

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

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

</span><span>/*</span><span>*
 * 深度遍历目录，并整理多页面模块
 * @param path 需要变量的路径
 * @param moduleName 模块名称
 </span><span>*/</span>
<span>function</span><span> readDirSync(path,moduleName){
  </span><span>//</span><span>缓存模块对象</span>
  <span>var</span> module = {moduleID:"",moduleHTML:"",moduleJS:""<span>}
  </span><span>//</span><span>获取当前模块ID</span>
  <span>var</span> moduleID = path.replace(moduleRootPath+"/",""<span>)
  </span><span>if</span> (path ==<span> moduleRootPath){
    moduleID </span>= ""<span>
  }
  module.moduleID </span>=<span> moduleID
  </span><span>//</span><span>获取目录下所有文件及文件夹</span>
  <span>var</span> pa =<span> fs.readdirSync(path)
  pa.forEach(</span><span>function</span><span>(ele,index){
    </span><span>var</span> info = fs.statSync(path+"/"+<span>ele)
    </span><span>if</span><span>(info.isDirectory()){
      </span><span>//</span><span> console.log("dir: "+ele)</span>
      readDirSync(path+"/"+<span>ele, ele)
    }</span><span>else</span><span>{
      </span><span>//</span><span>判断当前模块的html是否存在</span>
      <span>if</span> (moduleName+".html" ==<span> ele){
        module.moduleHTML </span>= path+"/"+<span>ele
      }
      </span><span>//</span><span>判断当前模块的js是否存在</span>
      <span>if</span> (moduleName+".js" ==<span> ele){
        module.moduleJS </span>= path+"/"+<span>ele
      }
      </span><span>//</span><span> console.log("file: "+ele)</span>
<span>    }
  })
  </span><span>//</span><span>判断模块是否真实(可能只是个分级目录)</span>
  <span>if</span> ((module.moduleID != "" &amp;&amp; module.moduleHTML != "") || (module.moduleID != "" &amp;&amp; module.moduleJS != ""<span>)){
    moduleList.push(module)
  }
}</span>

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

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

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

 4.修改webpack.dev.conf.js：开发时的多页面模板配置

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

</span><span>//</span><span>**删除**</span><span>
//删除</span><span>module.exports中原有的HtmlWebpackPlugin配置(内容可能不一样，反正HtmlWebpackPlugin就对了)</span>
<span>new</span><span> HtmlWebpackPlugin({
filename: </span>'index.html'<span>,
template: </span>'index.html'<span>,
inject: </span><span>true</span><span>
})

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

5.修改webpack.prod.conf.js：编译时的多页面模板配置

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

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

</span><span>//</span><span>**末尾添加**</span><span>
//</span><span>添加Html模板集合</span>
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