Quasar Framework 中文网以前是用 SSR 模式构建的，今天全部转为静态。

SSR 模式对 SEO 友好，但还是需要消耗服务器性能。由于 Quasar Framework 中文网以文档为主，如果能生成纯静态网站，应对大流量访问就不用担心了。

查了下 quasar 的 isssue，发现一个生成静态网站的应用扩展，赶紧试了下。

具体解决方案和详细配置请参考 GITHUB：https://github.com/freddy38510/quasar-app-extension-ssg

步骤

1. 在你的项目中添加应用扩展

yarn add --dev https://github.com/freddy38510/quasar-app-extension-ssg

2. 安装此应用扩展

quasar ext invoke ssg

有两个提示，全选 yes

3. 在 quasar.conf.js 中添加如下 ssg 配置

module.exports = function (/* ctx */) {
  return {
    // ...

    ssg: {
      // 要生成静态页的路由
      routes: ['/', '/about', '/users', '/users/someone'],
      cache : {
        //忽略列表，列表中的文件改表不会导致重新build
        ignore: [
          // 如果你不想一改动ssg配置就需要重新build的话，可以将quasar.conf.js放入忽略列表
          // 但如果改变了除ssg配置的其它地方，则将quasar.conf.js从忽略列表移除
          //'quasar.conf.js'
        ]
      }
    },

    // ...
  }
}

4. 输入如下命令生成静态页

quasar ssg generate 

//或者

npm run build:ssg

先是按 SSR 模式构建阶段，默认构建到 node_modules/.cache/quasar-app-extension-ssg 目录。如果项目主要内容没有发生更改的话，重新生成静态页就会跳过构建阶段 ( 你也可以设置忽略列表，在忽略列表中的文件即使更改了，也不会触发构建）

然后才是生成阶段。

如果页面较少，生成的时间也很快。如果路由很多，生成的时间也会很慢。请耐心等待。

高级应用

如果路由很多，可以根据目录结构来生成路由数组

1. 在 package.json 文件的 "dependencies" 中增加依赖包：

"require-context": "^1.1.0"

2. 在 quasar.conf.js 中添加如下 ssg 配置 (以 Quasar Framework 中文网为例)

const requireContext = require('require-context')
const path = require('path')

module.exports = function (/* ctx */) {
  return {
    // ...
    ssg: {
      // pass options here
      routes(callback) {
        //let pageRoutes = ['/', '/start/pick-quasar-flavour', '/start/how-to-use-vue'];
        let pageRoutes = ['/', '/layout-builder']
        const pageFiles = requireContext(path.join(__dirname, './src/pages'), true, /\.md$/)
        pageFiles.keys().forEach(key => {
          pageRoutes.push('/'+key.replace(/(\.\/|\.md)/g, '').replace(/(\\)/g, '/'));
        })

        const layoutFiles = requireContext(path.join(__dirname, './src/layouts/gallery'), true, /\.vue$/)
        layoutFiles.keys().forEach(key => {
          pageRoutes.push('/layout/gallery/'+key.replace(/(\.\/|\.vue)/g, '').replace(/(\\)/g, '/'));
        })
        callback(null, pageRoutes)
      },
      cache : {
        ignore: [
          'quasar.conf.js'
        ]
      }
    },

    // ...
  }
}