vue-cli 配置多页面应用

本文教程根据这里改编并且完善，gitbub地址在这里。

使用vuecli的webpack模版搭建完成后

教程内容：

• utils.js 添加以下内容

  //glob模块，用于读取webpack入口目录文件
  var glob = require('glob');

  //export获得入口方法
   exports.getEntries = function (globPath) {
      var entries = {}
      /**
      * 读取src目录,并进行路径裁剪
      */
      glob.sync(globPath).forEach(function (entry) {
      /**
      * path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串
      * path.extname 获取文件后缀
      */
      var basename = path.basename(entry, path.extname(entry), 'router.js') // 过滤router.js
      // ***************begin***************
      // 当然， 你也可以加上模块名称, 即输出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
      // 最终编译输出的文件也在module目录下， 访问路径需要时 localhost:8080/module/index.html
      // slice 从已有的数组中返回选定的元素, -3 倒序选择，即选择最后三个
      // var tmp = entry.split('/').splice(-3)
      // var pathname = tmp.splice(0, 1) + '/' + basename; // splice(0, 1)取tmp数组中第一个元素
      // console.log(pathname)
      // entries[pathname] = entry
      // ***************end***************
          entries[basename] = entry
      });
      // console.log(entries);
      // 获取的主入口如下： { main: './src/module/index/main.js', test: './src/module/test/test.js' }
      return entries;
  }

• webpack.base.conf.js
  删除 entry: {app: ‘./src/main.js’},，取而代之如下：

module.exports = {
      ···
      entry: utils.getEntries('./src/module/**/*.js'),

• webpack.dev.conf.js和webpack.prod.conf.js移除原来的HtmlWebpackPlugin

var pages = utils.getEntries('./src/module/**/*.html')
for(var page in pages) {
    // 配置生成的html文件，定义路径等
    var conf = {
    filename: page + '.html',
    template: pages[page], //模板路径
    inject: true,
    // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
    // 如何更好的理解这块呢？举个例子：比如本demo中包含两个模块（index和about），最好的当然是各个模块引入自己所需的js，
    // 而不是每个页面都引入所有的js，你可以把下面这个excludeChunks去掉，然后npm run build，然后看编译出来的index.html和about.html就知道了
    // filter：将数据过滤，然后返回符合要求的数据，Object.keys是获取JSON对象中的每个key
    excludeChunks: Object.keys(pages).filter(item => {
        return (item != page)
    })
}
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
    module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

备注内容：
由于上述教程之提供了关键的几个配置，在按照教程配置完后并不能直接运行。
剩下的问题主要是因为路径引起。
1. index.js中引用 index.vue 需要写全部后缀名。
2. 各个html中图片资源以组件路径。
3. config/index.js中build属性中的assetsPublicPath属性配置’/’更改为”，这样build后的文件才可以直接使用。

安装方式的话推荐使用 yarn

yarn安装完毕后的使用过程如下
cd到项目路径后：

yarn

npm run build

npm run dev

---

备注：

• 本实例只在mac环境下测成功 windows未测试。
• 这里的代码下载可以下载直接运行