使用 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? 的相关文章

  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • 在 Vue 3 的 Jest 测试中模拟 vue-router useRouter()

    我在我的应用程序中使用 Vue 3 和 Vue Router 并且在使用 Jest 对使用的组件创建单元测试时遇到了问题useRoute 例如以下内容
  • 在 Vue 3 的生产构建过程中从 Vue 模板中删除所有数据测试属性

    我在 TS 中使用 Vue3 最后一个 vue cli 我想在 vue loader 编译 vue 文件时获取所有节点 vnodes 元素 我需要读取节点属性并删除所有 数据测试 我尝试在 vue config js 中使用 module
  • 如何在 Vuejs 中加载 Pixi 实例?

    我正在 VueJS 组件中学习 PixiJS 如下所示Pixi教程 https github com kittykatattack learningPixi我控制台显示此错误 vue runtime esm js 2b0e 619 Vue
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值?

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C
  • Nuxt JS 插件是否可以只运行一次?

    我有几个 VueX 操作 仅在服务器上运行 并从nuxtServerInit 它们向外部服务发出 HTTP 请求 这会减慢 TTFB 的速度 我想实现一个缓存插件 可以从 Redis 存储和检索值 目的是避免在每个请求的操作中发出 HTTP
  • Breeze.js 与 WCF 数据服务

    我刚刚开始探索 js 库 breeze js 我查看了示例 但似乎找不到任何有关如何使用 WCF 数据服务的示例 所有示例似乎都在 Web API 上 有谁知道如何通过 Breeze js 使用 WCF 数据服务 或任何其他 OData 服
  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • Laravel Vue SPA 与 MPA/SSR

    许多 laravel vue 教程使用 ajax 调用来获取数据 看来 SPA 与 Laravel 是完全隔离的 IE Laravel 只是一个数据 API vue 应用程序也可以简单地托管在第三方外部服务器 例如 AWS S3 上 这是推
  • $vuetify.goTo 不会在 v-card 组件内滚动

    我有一个带有 v 卡的组件 我在卡片标题区域放置了一个简单的按钮 当我单击时 我看到该方法被触发 它显示在控制台中 但是 卡片永远不会滚动 如果我输错了类名 则会收到错误 因此 goTo 似乎会执行某些操作 因为它找不到该类 没有拼写错误
  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 如何在Vuejs中动态管理页面标题?

    我构建一个应用程序 我有一个带有页面标题的标题 目前 我使用视图路由器来定义我的标题 path events name events component Events meta title Liste des v nements 在我的刀片
  • 使用 Javascript 在前端创建基本 URL(开发、API 和生产)

    无论开发和部署如何 如何制作适用于 http https localhost 端口和实际域的基本 url 我想创建一个可以在所有场景或条件下工作的基本 url 无论 http https 协议 端口 本地主机和实际域如何 无论是在开发中还是
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • 模拟安装挂钩 Jest 测试装置

    我正在对组件进行一些单元测试 但是 在某些组件中 我有一些东西在运行mounted使我的测试失败的钩子 我设法模拟了我不需要的方法 但是 我想知道是否有一种解决方法可以模拟mounted钩住自己 components attendeesLi
  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • 如何修复套接字 io 中的 400 错误错误请求?

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误
  • 如何仅在某些页面上显示验证码图标(VUE reCAPTCHA-v3)?

    我使用这个包 https www npmjs com package vue recaptcha v3 https www npmjs com package vue recaptcha v3 我添加了我的 main js import V
  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide

随机推荐

  • 对 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 组件都不起作用 即单击按