如何预渲染多个 Vue 应用页面？

Question

我正在尝试（未成功）在使用 Vue CLI 构建的同一项目中预渲染多个 Vue 应用程序的 HTML。由于多种原因，我不想使用 Vue Router 或 Nuxt 等。

我试过使用 prerender-spa-plugin，但由于我不使用路由，它只预呈现索引。

我的 vue.config.js 看起来像这样：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  pages: {
    index: 'src/index.js',
    about: 'src/about.js',
  },
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/'],

        postProcess(route) {
          route.html = route.html.replace('</script><div>', '</script><div id="app" data-server-rendered="true">');

          return route;
        },

        renderer: new Renderer({
          headless: true,
          renderAfterDocumentEvent: 'render-event',
        }),
      }),
    ],
  },
};

和我的 index.js 和 about.js 基本上是这样的：

import Vue from 'vue';
import App from './Index.vue';

new Vue({
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  },
}).$mount('#app');

我也有独特的 public/ index.html 和 about.html 页面。

prerender-spa-plugin 的 routes 参数似乎无法识别 '/about.html' 之类的东西。有没有简单的方法实现多个预渲染页面？

我是否必须与 SSR 模块搏斗？

提前致谢。

Answer 1

我找到的解决方案是多次调用 new PrerenderSPAPlugin，每条路线一个。

Answer 2

我也面临同样的问题，我有静态 html 使用 vue 组件，我想在输出构建目录中预渲染 vue 组件。我在构建过程中使用 laravel-mix 包。您能否 post 完整的解决方案，即多次调用新的 PrerenderSPAPlugin，每个路由一个。

如果我能获得完整的 webpack.config.js，我将很容易理解并使用 laravel-mix 实现相同的内容。

如何预渲染多个 Vue 应用页面？

How to pre-render multiple Vue app pages?

webpack

vue.js

server-side-rendering