使用 prerender-spa-plugin 时如何加载 Vuetify?

2024-01-10

当我们在开发模式下运行 Vuetify 应用程序时,使用npm run dev,工作正常。

然而,当我们使用prerender-spa-plugin,Vuetify CSS 文件正确加载,但所有 JavaScript 组件都不起作用(即单击按钮打开抽屉不起作用等)。

我们尝试将脚本标签硬编码到 Vuetify 的 CDN,但这没有奏效。

我们在 GitHub 上搜索了使用 Vuetify 和 prerender-spa-plugin 的项目,但没有发现我们的代码和其他人的代码之间有任何差异。

我们尝试使用 Renderer() 的设置来解决该错误,但无法确定问题的根本原因。

Webpack 配置设置:

webpackConfig.plugins.push(
new PrerenderSPAPlugin({
    // Required - The path to the webpack-outputted app to prerender.
    staticDir: path.join(__dirname, '..', 'dist'),

    // Required - Routes to render.
    routes: [ '/', '/about-us.html', '/act-now.html' ],

    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
    },

    renderer: new Renderer({
    renderAfterDocumentEvent: 'app.rendered',
    headless: false
    })
})
)

main.js

import '@babel/polyfill'
import 'core-js/es6/promise'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import '@/plugins/vuetify'
import App from './App'
import router from './router'

import 'vuetify/dist/vuetify.min.css'
import '../static/css/ms-theme.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),

  mounted () {
    document.dispatchEvent(new Event('app.rendered'))
  }
})

不幸的是,添加data-server-rendered="true"没有帮助,但我找到了解决我的问题的方法:https://stackoverflow.com/a/61774969/9801398 https://stackoverflow.com/a/61774969/9801398

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

使用 prerender-spa-plugin 时如何加载 Vuetify? 的相关文章

随机推荐

  • 对 XElement 进行排序

    我有一个 XElement 其映射如下
  • XDocument 删除节点

    我有一个 XML 文件
  • 为什么 https 请求在我的 React-Native 应用程序中不起作用?

    在我的React Native应用程序中 http请求工作正常 但是当涉及到https请求时 它给出错误 网络请求失败 这里的问题有点奇怪 就好像我从互联网上选择并运行任何示例 api 一样 即使使用 https 它也可以正常工作 我不知道
  • lxml 使用名称空间而不是 ns0、ns1、

    我刚刚开始了解 lxml 基础知识 但我被命名空间困住了 我需要生成这样的 xml
  • Bootstrap下拉父菜单活动类

    这里的菜鸟 寻找答案 但无法发现我做错了什么 我的菜单在 普通 菜单的活动类中工作正常 但我找不到使父菜单成为 活动 菜单的解决方案 下拉菜单引导 1 代码 li class dropdown a class dropdown toggle
  • 更新/重新加载标记而不重新加载谷歌地图

    我使用以下代码来生成标记引脚 它加载完美 但在这张地图的左侧我有过滤器 如何在不重新加载地图的情况下重新加载标记 这引起了一些挫败感 因此我们将不胜感激 非常感谢 Google map results var contentStrings
  • 如何在C#中使用MessagePack?

    我读了msgpack cli 快速入门 https github com msgpack msgpack cli wiki Quick Start文档 我还获得了 C CLI NuGet 包 v0 3 没有任何课程 例如BoxingPack
  • 如何从表面视图创建和保存屏幕截图? [复制]

    这个问题在这里已经有答案了 我有一个应用程序 我希望能够捕获屏幕截图 这是我的代码 public class Screenshot private final View view Create snapshots based on the
  • MVC:将模型指针传递给视图?

    我有一个 iOS 应用程序正在运行 并且正在尝试清理一些代码结构和实现 我想澄清我对 MVC 的理解并改进我的代码 问题 将模型传递给 UIView 以便视图可以根据模型元素的状态呈现它是否合法 我在下面概述了一个示例 但意识到它可能不清楚
  • 如何将 trix-editor 集成到 Angular 2 应用程序中?

    我正在尝试为我的角度应用程序使用 trix 编辑器 但是 我没有获得任何资源 npm 包来在 Angular 2 应用程序中安装 trix 编辑器 您能帮助我提供资源 步骤吗 我也找不到 angular2 的任何内容 只需设置即可 角度 j
  • PowerShell Get-ExecutionPolicy 返回不同的值

    根据我用于获取 PowerShell 执行策略设置的方法 我得到两个不同的值 如果我跑Get ExecutionPolicy在 PowerShell 提示符中 我得到 不受限制 如果我使用以下代码 我会收到 受限 using var run
  • AndroidManifest.xml 中 Uses-Permission 和 Permissions 标签的区别

    有什么区别Uses Permission and Permissions tag in AndroidManifest xml 我明白了uses permission标签 因为它用于访问互联网 我们的应用程序的位置 但我不明白我们何时以及为
  • 如何导入 Google App Engine 文件夹中的 python 脚本文件?

    我对 Python 和 Google App Engine 都很陌生 我想通过创建文件夹结构来组织我的脚本文件 然而 当我这样做时 我无法再弄清楚如何导入它们 例如 main py eggs spam py 如何在 main py 中导入
  • 我在哪里设置我的公司名称?

    创建新的源文件时 xcode 会添加带有您的姓名和公司名称的注释 我在哪里为 xcode 设置我的公司名称 而不是项目 在 Xcode 4 GM 种子中 在导航窗格中 最左侧 侧 选择项目 顶部项目 展开实用程序窗格 在窗口 右上角 最右边
  • Mapbox GL 弹出窗口 .setDOMContent 示例

    我正在尝试创建一个自定义按钮 以显示在生成动态链接 URL 的弹出窗口中 由于时间原因 我似乎无法通过 setHTML 执行此操作 无法在运行时将按钮绑定到函数 所以我想我应该尝试新的 setDOMContent 关于此功能如何工作的在线信
  • ASP.Net Core docker从服务容器访问服务容器抛出ssl证书错误

    我正在开发一个具有微服务架构的 Web 应用程序 我使用 docker 和 docker compose 来运行我的微服务 我想从前端服务访问 api 但它总是抛出 SSL 证书异常 这告诉我颁发者未通过curl 进行验证 我从演示 MVC
  • 如何在 Flask-SQLAlchemy 应用程序中执行原始 SQL

    如何在 SQLAlchemy 中执行原始 SQL 我有一个 python Web 应用程序 它在 Flask 上运行 并通过 SQLAlchemy 与数据库连接 我需要一种方法来运行原始 SQL 该查询涉及多个表联接以及内联视图 我试过了
  • 使用其名称作为字符串来调用单独的 Windows 窗体

    我需要能够创建一个按钮 当我单击该按钮时 该按钮可以链接到不同的 Windows 窗体 但是 此按钮是动态生成的 有时可以根据需要链接到不同的表单 例如 我的按钮可以链接到 FormA vb 或 FormB vb 我可以让按钮根据需要创建字
  • zig 创建了一个 C 库,但 C 无法使用

    我可以让 Zig 创建一个 C 库 但是当我尝试从 C 程序中使用所述库时 它无法找到所包含函数的定义 我的图书馆定义 const std import std export fn removeAll name const u8 len u
  • 使用 prerender-spa-plugin 时如何加载 Vuetify?

    当我们在开发模式下运行 Vuetify 应用程序时 使用npm run dev 工作正常 然而 当我们使用prerender spa plugin Vuetify CSS 文件正确加载 但所有 JavaScript 组件都不起作用 即单击按