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

4次阅读

共计 3120 个字符，预计需要花费 8 分钟才能阅读完成。

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.
      })
    })
  ]
}