vue多页应用打包优化（vue-cli3）

多页应用打包需要在vue.config.js中配置页面入口，为了防止每增加一个页面就需要修改vue.config.js，可以通过读取src/pages下文件路径的方式获取文件名，直接动态生成pages配置项数据

1. npm install glob --s-dev
2. 创建entry.js文件，读取文件路径匹配文件名，此时文件名就与pages中的入口和页面路径名保持一致

const path = require('path')
const glob = require('glob')

const generateEntries = () => {
  // 默认查询多页面地址
  const PATH_ENTRY = path.resolve(__dirname, './src/pages')
  // 约定构建出的页面用folder名字，默认入口为每个页面的main.js
  const entryFilePaths = glob.sync(PATH_ENTRY.split(path.sep).join("/") + '/**/main.js')
  const entry = {}
  
  entryFilePaths.forEach((filePath) => {
    const filename = filePath.match(/([^/]+)\/main\.js$/)[1]
    entry[filename] = {
      entry: filePath,
      template: 'public/index.html',
      filename: `${filename}.html`,
      chunks: ['chunk-libs', 'chunk-elementUI', 'runtime', filename]
    }
  })
  return entry
}

module.exports = {
  generateEntries
}

3. 修改vue.config.js的pages

const { generateEntries } = require('./entry')

module.exports = {
  /*pages指定入口*/
  pages: generateEntries()
  ...
  // 其他配置项
}

4. 注意glob版本问题，glob版本8.0.*已将所用到的minimatch库的版本更新到5.0.*版本，此版本无法识别路径中的反斜杠“\”，但是通过path模块拼接的路径的分隔符是反斜杠“\“，会导致识别到的路径数组generateEntries()返回值为空数组而报错，报错信息如下：
   webpackOptionsValicationError：Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

此时需要将路径中的反斜杠“\“”转成正斜杠"/"

  const PATH_ENTRY = path.resolve(__dirname, './src/pages')
  const entryFilePaths = glob.sync(PATH_ENTRY.split(path.sep).join("/") + '/**/main.js')
  // 8.*以下的版本不需要，直接glob.sync(PATH_ENTRY + '/**/main.js')即可