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

【问题标题】：How to pre-render multiple Vue app pages?如何预渲染多个 Vue 应用页面？
【发布时间】：2019-11-30 03:19:17
【问题描述】：

我正在尝试（未成功）在使用 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 模块搏斗吗？

提前致谢。

【问题讨论】：

我想知道如果 Route 没有告诉您，您的水疗中心怎么知道要提供什么？根据文档，route 参数采用多条路线 - 我猜你只是将水疗中心留在 / 以外的任何其他路径
就是这样，我不想要SPA。我只想要同一个“应用程序”中的多个页面，这些页面可以正常浏览并根据需要共享数据。
啊 - 我错过了你正在使用 pages 选项 - 也许你只使用 index.html 作为条目 - 尝试显式：cli.vuejs.org/config/#pages -> dist/{filename}.html - 现在只是猜测无法测试跨度>
不幸的是，这不起作用。如果filename 被省略，那么它是从条目中推断出来的。页面都在开发模式下工作，它只是想弄清楚如何预渲染它是困难的。我不确定预渲染插件是否支持 MPA
检查 github.com/JoshTheDerf/prerenderer/… 实际上指向路由参数不正确，很奇怪..

标签： vue.js webpack server-side-rendering

【解决方案1】：

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

如果我能得到完整的 webpack.config.js，我很容易理解并使用 laravel-mix 实现它。

【讨论】：

【解决方案2】：

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

【讨论】：