关于vue.js:总结vue-预渲染

环境

• vue-cli@3创立的空白我的项目(vue,vue-router)
• prerender-spa-plugin@3.4.0

根底

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== "production") return;

    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 必填 - app预渲染的webpack打包输入目录
          staticDir: path.join(__dirname, "dist"),
          // 必填 - 预渲染的路由门路
          routes: ["/", "/about"],
        }),
      ],
    };
  },
};

进阶

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // 必填 - app预渲染的webpack打包输入目录
      staticDir: path.join(__dirname, 'dist'),

      // 可选 - app应该渲输入的门路
      // (默认是staticDir.)
      outputDir: path.join(__dirname, 'prerendered'),

      // 可选 - index.html 地位
      indexPath: path.join(__dirname, 'dist', 'index.html'),

      // 必填 - 预渲染的路由门路
      routes: [ '/', '/about', '/some/deep/nested/route' ],

      // Optional - Allows you to customize the HTML and output path before
      // writing the rendered contents to a file.
      // renderedRoute can be modified and it or an equivelant should be returned.
      // renderedRoute format:
      // {
      //   route: String, // Where the output file will end up (relative to outputDir)
      //   originalRoute: String, // The route that was passed into the renderer, before redirects.
      //   html: String, // The rendered HTML for this route.
      //   outputPath: String // The path the rendered HTML will be written to.
      // }
      postProcess (renderedRoute) {
        // Ignore any redirects.
        renderedRoute.route = renderedRoute.originalRoute
        // Basic whitespace removal. (Don't use this in production.)
        renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
        // Remove /index.html from the output path if the dir name ends with a .html file extension.
        // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
        if (renderedRoute.route.endsWith('.html')) {
          renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route)
        }

        return renderedRoute
      },

      // 可选 - 应用 html-minifier (https://github.com/kangax/html-minifier)
      // 压缩生成的HTML文件.
      // Option reference: https://github.com/kangax/html-minifier#options-quick-reference
      minify: {
        collapseBooleanAttributes: true, // 从布尔属性中疏忽属性值
        collapseWhitespace: true, // 折叠节点之间的空白
        decodeEntities: true, // 尽可能应用Unicode字符
        keepClosingSlash: true, // 在单例元素上保留开端斜杠
        sortAttributes: true // 按频率排列属性
      },

      // Server configuration options.
      server: {
        // 通常会自动检测到闲暇端口，但如果须要能够自定义设置。
        port: 8001
      },

      // 理论要应用的预渲染器. (你能够本人编写，预计很难)
      // Available renderers: https://github.com/Tribex/prerenderer/tree/master/renderers
      renderer: new Renderer({
        // 可选 - 要增加到window对象的属性的名称，内容为`inject`.
        injectProperty: '__PRERENDER_INJECTED',
        // 可选 - 任何你想让你的应用程序通过'window.injectProperty'拜访的值。
        inject: {
          foo: 'bar'
        },

        // 可选 - 默认是0，没有限度
        // 路由是异步渲染的。
        // 应用它来限度并行渲染的路由数量。
        maxConcurrentRoutes: 4,

        // 可选 - 期待渲染，直到在文档上分派指定的事件。
        // eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
        renderAfterDocumentEvent: 'custom-render-trigger',

        // 可选 - Wait to render until the specified element is detected using `document.querySelector`
        renderAfterElementExists: 'my-app-element',

        // 可选-期待渲染，直到肯定的工夫曾经过来.
        // 不举荐
        renderAfterTime: 5000, // 期待5s

        // Other puppeteer options.
        // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
        headless: false // Display the browser window when rendering. Useful for debugging.
      })
    })
  ]
}

参考文章

• 预渲染 prerender-spa-plugin 避坑指南