环境

  • 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.PuppeteerRenderermodule.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 避坑指南