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

2024-05-04

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

我尝试过使用预渲染 Spa 插件 https://github.com/chrisvfritz/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 页面。

The routesprerender-spa-plugin 的参数似乎无法识别类似的东西'/about.html'。有没有一种简单的方法来实现多个预渲染页面?

我必须与 SSR 模块较劲吗?

提前致谢。


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何预渲染多个Vue应用页面? 的相关文章

随机推荐

  • python统计前10名

    使用Python 2 6 我有很大的文本文件 以下是前 3 个条目 但我需要检查超过 50 个用户 html log jeff 1153 3 1 84 625 54 1 2 71 3 2 10 7 58 499 3 5 616 36 241
  • ruby 运算符 ||= 智能吗?

    我有一个关于 ruby 中 语句的问题 这对我特别感兴趣 因为我正在使用它写入内存缓存 我想知道的是 首先检查接收器 看看它在调用该设置器之前是否已设置 或者它实际上是一个别名x x y 对于普通变量来说这并不重要 但使用类似以下内容 CA
  • firestore 读取是异步的,我想要同步行为

    我想在本地存储从云端读取的数据 为了实现这一点 我使用一个全局变量 quizzes 来保存所有数据 为此 当我构建我的Quiz对象 我需要确保在创建它们之前 相关数据已经从云端下载 因为从 firestore 读取数据时 它是异步发生的 我
  • 在 Python 中向字典中添加新项目[重复]

    这个问题在这里已经有答案了 如何在 Python 中向现有字典添加项目 例如 给定 default data item1 1 item2 2 我想添加一个新项目 default data default data item3 3 defau
  • SQLite3内存数据库到磁盘的纯Python备份

    在不安装额外模块的情况下 我如何使用SQLite备份API https sqlite org c3ref backup finish html将内存数据库备份到磁盘数据库 我已成功执行磁盘到磁盘备份 但将已存在的内存中连接传递给sqlite
  • 在动态 Web 项目中处理配置(数据库登录名和密码等)的正确方法是什么?

    我刚刚开始使用 JSP 进行动态 Web 编程 处理配置的正确方法是什么 例如 数据库名称 主机 登录名和密码以及服务器中的索引目录等 我最关心的是密码的安全性 目前我将数据硬编码到 java 文件中 我认为这不是正确的方法 所以我想从您的
  • 如何在MySQL中使用数字字符串的比较运算符?

    我有一个员工表 有类似领域的经验VARCHAR类型 此字段结合了用短划线 分隔的总年份和总月份 因此我必须按年份过滤具有 3 年以上经验的经验 我的表结构 所以现在我必须获得3年以上经验的id 我尝试如下 SELECT FROM emplo
  • 使用 Python 的 email.generator 包创建电子邮件草稿

    我目前正在使用此代码通过 Python 生成电子邮件 from email import generator from email mime multipart import MIMEMultipart from email mime te
  • 相机图像旋转问题

    我在这里面临一个非常奇怪的问题 当我在纵向模式下单击图像并上传它 然后再次获取它时 它会逆时针旋转 90 度显示 但是当我在相机胶卷中看到它时 它会以正确的方向显示 因为它被拍摄 我已经尝试了几乎所有可能的链接 代码来解决这个问题 但似乎没
  • 显示删除了多少行

    我使用C 程序 我的数据库是SQL Server 2008 当用户从数据库中删除一些行时 我想在 Windows 应用程序中向他 她显示删除了多少行 我想知道如何将 SQL 消息发送到 C 并向用户显示 例如 当我从表中删除 4 行时 SQ
  • 删除框架,同时保留 pyplot 子图中的轴

    我正在创建一个包含 3 个子图的图形 并且想知道是否有任何方法可以移除它们周围的框架 同时保持轴就位 如果您想删除轴脊 但不想删除其他信息 刻度 标签等 您可以这样做 fig ax plt subplots 7 1 sharex True
  • 在 F# 中“合并”受歧视的联合?

    继从这个问题 https stackoverflow com questions 53506325 result vs raise in f async 我在组合不同类型时遇到问题Result类型在一起 以下是一个人为的示例 不是真实的代码
  • AppCompat Spinner 的 TextInputLayout 错误对齐问题

    我正在使用一个显示下拉列表的应用程序Spinner与EditText作为一个孩子TextInputLayout在它的旁边 当下面显示带下划线的错误时TextInputLayout 那么EditText会上升 并且对齐会丢失 请看我的截图 我
  • 为什么mysql状态key_reads,key_reads_request的值为零?

    我对 mysql 状态有些困惑 mysql gt 显示类似 key 的状态 Variable name Value Com assign to keycache 0 Com preload keys 0 Com show keys 0 Ha
  • 如何更新我的流星项目中的 cordova-plugin-device ?

    当我运行流星项目时 我收到此警告 警告 尝试安装插件 电子邮件受保护 cdn cgi l email protection 但 它的最低版本应为 1 1 1 以确保与 当前平台版本 安装最小 版本以方便起见 但您应该调整您的依赖项 然后 我
  • Angular 2 中的 ag-grid 单元测试

    有人在 Angular 2 中对 ag grid 组件进行过单元测试吗 对我来说 测试用例运行时 this gridOptions api 仍然未定义 很抱歉参加聚会有点晚了 但几天前我一直在寻找这个问题的答案 所以想为最终来到这里的其他人
  • iOS 12.1 上的 UITabBar 项目在返回导航上跳跃

    我有一个 iOS 应用程序UITabBarController在主屏幕上 导航到隐藏的详细信息屏幕UITabBarController有设置hidesBottomBarWhenPushed true 返回主屏幕时UITabBarContro
  • 使用 EnableCors 时“请求的资源不支持 http 方法‘OPTIONS’”

    我想在 Asp net Web Api 中的一项特定操作上启用 CORS 我正在尝试这样做 Route api mycontroller myaction HttpPost EnableCors https example com post
  • 如何强制编译器在 C++ 中通过引用传递某些变量?

    这是一个简单的例子 template
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch