vue-cli3的多页模式有什么用？

Question

vue-cli3里面的vue.config.js有一个pages配置项，可以生成多个页面。
但是这种模式并不是传统的MPA多页模式，也不是SPA。更像是一种一次性生成多个单页应用的方式，多个单页应用之间可以共享组件、方法和状态。
我不理解的是，这种多单页模式有什么应用场景吗？用于减少首屏渲染时间吗？还是说让路径看起来好看一点？单页应用实际上可以通过路由懒加载来减少首屏渲染时间，路由也能通过router来控制。这种多单页模式的优点在哪里呢？

Answer 1

你问题应该转为，单页和多页面的不同应用场景，这个我稍后再说，先说说你不理解地方

在不使用 vue-cli 高封装的 api 的时候我们想要配置打包出多页面，需要使用html-webpack-plugin插件输出一个html文件，多页面就配饰多个new HtmlWebpackPlugin()即可
多页面并不是为了减少首屏渲染问题，更不是路由美化，要知道，前端是从多页面jsp页面渲染走到如今前后端分离，spa的时代，当然多页面首屏一定程度上确实比单页面好些，但这不是它额目的

• 多页面的使用场景

  1. 对SEO有要求的项目
  2. 传统后台插入主流框架开发

以上是在开发中个人观点

所有vue-cli提供page参数配置多页面，就是想让大家利用前端主流框架，开发传统项目...无非就这些
下面附上vue-cli多页面配置：

const glob = require('glob')
const pages = {}
const filesReg = 'src/pages/*'
// 依据文件夹动态生成pages参数
glob(filesReg, { sync: true }).forEach(function(file) {
  let filename = file.split('/')[2]
  pages[filename] = {
    entry: `${file}/main.js`,
    template: `${file}/index.html`,
    filename: `${filename}.html`,
    title: `${filename} Page`,
    chunks: ['chunk-vendors', 'chunk-common', `${filename}`]
  }
})



module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 静态资源访问的路径
  pages: pages, // 注意这里的输出
  outputDir: 'website',
  // assetsDir: 'static',
  filenameHashing: false,
  configureWebpack: config => {
    // webpack配置
  },
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
    // progress: false,
    host: getIPAdress(),
    port: 8898,
    open: true,
    proxy: {
    }
  }
}