prerender-spa-plugin 在 quasar 框架 vue 1.x 中在一条路线上显示 2 个页面，而不是仅一个页面答案

【问题标题】：prerender-spa-plugin shows 2 pages on one route, instead of only one, in quasar framework, vue 1.xprerender-spa-plugin 在 quasar 框架 vue 1.x 中在一条路线上显示 2 个页面，而不是仅一个页面
【发布时间】：2024-05-18 15:40:01
【问题描述】：

我正在尝试配置 prerender-spa-plugin 以使用我的 vue.js (1.x) 应用程序。当我在没有它的情况下构建应用程序时 - 一切正常，但我需要为 SEO 目的预先渲染页面。

当我安装插件时，它会进行预渲染，但随后会显示一些路由器错误（[vue-router] Uncought error during transition）和TypeError: undefined is not an object (evaluating 's(e).isEqualNode')。同样 - 如果我在没有 pretender-spa-plugin 的情况下构建应用程序以进行生产，则不会发生这些错误。

关于工具的一些信息：

- Mac OS
- node v6.10.1
- quasar --version 0.5.2 (project runs using quasar framework)
- npm -v3.10.10
- vue.js (1.x)

那么，相关设置为：

webpack.prod.conf.js

module.exports = {
  plugins: [
  new PrerenderSpaPlugin(
    // Absolute path to compiled SPA
    path.join(__dirname, '../dist'),
    // List of routes to prerender
    [ '/',  '/apps'],
    {
       captureAfterDocumentEvent: 'custom-post-render-event',
       captureAfterTime: 2000,
       ignoreJSErrors: false,
       captureAfterElementExists: '.main',
    } 
  )
 ]

div .main 实际上存在于我需要预渲染的每个组件中

main.js

document.addEventListener('DOMContentLoaded', function () {
  Quasar.start(() => {
    Router.start(App, '#quasar-app')
  })
  document.dispatchEvent(new Event('custom-post-render-event'))
})

app.vue

module.exports = {
  replace: false,
  ....

我已经尝试过的：

不要使用其中一些触发器，我在此处针对 webpack 编写了这些触发器。我想我已经尝试了所有可能的组合 - 有时构建过程只是挂起，有时 - 它编译时遇到同样的问题。
我尝试在我最初的 app.vue 文件中设置此自定义，并将其附加到 ready () - 结果相同
我也尝试将 replace: false 指定给所有内部组件 - 再次，同样的结果 - 它总是给我路由器错误，然后显示在每条路由上呈现的索引页面（连同应该在那里）
“帮助”的唯一一件事是不为插件指定 / 路由。然后，我的索引组件没有预渲染，所有其他的都可以正常工作。但显然我也需要预先渲染它。

非常欢迎任何帮助或建议！也许，我错过了 quasar framework 特定的东西？

我也在用html-webpack-plugin，难道是因为它？

谢谢！

【问题讨论】：

标签： javascript webpack vue.js vue-router html-webpack-plugin

【解决方案1】：

好的，问题似乎出在vue-helmet 插件中。我不知道为什么，但在我安装 prerender 之前一切正常（vue-helment 用于管理单独页面上的元数据）。但是当一起使用时——它们会产生冲突。所以，我刚刚找到了另一种管理元数据的解决方案，它也适用于预渲染。现在，一切都很好

【讨论】：

你找到的解决方案是什么？