参考https://github.com/yaoyao1987/vue-cli-multipage

目录结构如下

首先在build文件夹下的utils.js文件中加入下面的函数

const glob = require('glob') // 这里的glob是nodejs的glob模块，是用来读取webpack入口目录文件的
exports.getEntry = function(globPath) {
  var entries = {},
    basename,
    tmp,
    pathname

  glob.sync(globPath).forEach(function(entry) {
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split('/').splice(-3)
    pathname = tmp.splice(0, 1) + '/' + basename // 正确输出js和html的路径
    entries[pathname] = entry
  })
  console.log(entries)
  return entries
}

然后在webpack.base.conf中做如下修改

然后webpack.dev.conf文件

首先做如下修改

 

 

然后在module.exports之前加入下列函数

var pages = utils.getEntry('./src/module/**/*.html')
for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    chunks: [pathname, 'vendor', 'manifest'], // 每个html引用的js模块
    inject: true // js插入位置
  }
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

然后注意在devServer中加入以下函数

    before(app) {
      app.use(
        require('connect-history-api-fallback')({
          rewrites: [
            { from: /\/add$/, to: '/module/index.html' },
            { from: /\/list$/, to: '/module/index.html' }
          ]
        })
      )
    }

此处是为了解决本地开发时 多页面多路由进入子路由页面直接刷新出错 

线上配置参考 http://router.vuejs.org/zh-cn/essentials/history-mode.html

具体可参考https://github.com/yaoyao1987/vue-cli-multipage/issues/22#issuecomment-278212911

此处只对index.html下的子路由进行了处理 

最后webpack.prod.conf文件

和上面一样先将 new HtmlWebpackPlugin注释掉

 

然后在export前加上

var pages = utils.getEntry('./src/module/**/*.html')
for (var pathname in pages) {
  console.log(pathname)
  // 配置生成的html文件，定义路径等
  var conf = {
    // filename: pathname + '.html',
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    chunks: [pathname, 'vendor', 'manifest'], // 每个html引用的js模块
    inject: true, // js插入位置
    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',
    hash: true
  }
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

打包后如下