Question

我正在尝试配置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，是不是因为它？

谢谢！

Answer 1

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

prerender-spa-plugin在一个路径上显示2个页面，而不是只有一个，在quasar框架中，vue 1.x

webpack.prod.conf.js

main.js

app.vue

我已经尝试过：

1 个答案: