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

Posted 2023-02-22

【中文标题】如何预渲染多个 Vue 应用页面？

【英文标题】：How to pre-render multiple Vue app pages?

【发布时间】：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' 之类的东西。有没有一种简单的方法可以实现多个预渲染页面？

我必须与 s-s-r 模块搏斗吗？

提前致谢。

【问题讨论】：

我想知道如果 Route 没有告诉您，您的水疗中心怎么知道要提供什么？根据文档，route 参数采用多条路线 - 我猜你只是将水疗中心留在 /

以外的任何其他路径

就是这样，我不想要SPA。我只想要同一个“应用程序”中的多个页面，这些页面可以正常浏览并根据需要共享数据。

啊 - 我错过了你正在使用 pages 选项 - 也许你只使用 index.html 作为条目 - 尝试显式：cli.vuejs.org/config/#pages -> dist/filename.html - 现在只是猜测无法测试跨度>

不幸的是，这不起作用。如果filename 被省略，那么它是从条目中推断出来的。页面都在开发模式下工作，它只是想弄清楚如何预渲染它是困难的。我不确定预渲染插件是否支持 MPA

检查 github.com/JoshTheDerf/prerenderer/… 实际上指向路由参数不正确，很奇怪..

【参考方案1】：

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

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

【参考方案2】：

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