如何使用 spa-prerender 插件在 VUE 中预渲染“*”（未找到）页面

Posted 2023-03-10

【中文标题】如何使用 spa-prerender 插件在 VUE 中预渲染“*”（未找到）页面

【英文标题】：How to prerender a "*" (not-found) page in VUE using spa-prerender plugin

【发布时间】：2019-01-26 13:19:55

【问题描述】：

我在 Vue.js 中使用 spa-prerender-plugin，一切正常。

但是，我也想预渲染我的 404 页面，在 Vue 中是这样的：

 
    path: '*', 
    name: 'FourOhFour', 
    component: FourOhFour 

使用插件，我想像这样添加 404：

routes: ['/', '/contact', '*'],

但是在尝试这个时，我得到：

[prerender-spa-plugin] 中的错误无法预渲染所有路由！

谢谢。

【参考方案1】：

我找到了另一个无需编辑 .htaccess 文件的简单解决方案。 只需插入用于预渲染到您的路由器的语句：

      path: '/404',
      name: 'FourOhFour',
      component: FourOhFour
  ,
  
      path: '*',
      name: 'FourOhFourX',
      component: FourOhFour
  

并预渲染静态路由：

routes: ['/', '/contact', '/404'],

【参考方案2】：

根据https://github.com/chrisvfritz/prerender-spa-plugin/issues/237，这是不可能的。

你可以编辑你的路由器代码

path: '/404', 
name: 'FourOhFour', 
component: FourOhFour

并通过替换此行将未解决的路由重定向到 .htaccess 中的 404 页面

RewriteRule    (.*) index.html [L]

与

RewriteRule    (.*) 404/index.html [L]

【讨论】：

嗨@bazilisok。是的，我在他的 GitHub 存储库上打开了这个问题，他的回复让我采取了另一条路线。显然，我仍然需要 url 来携带预期的 url，同时显示 404 页面。不要完全重定向到另一个/404 页面。我目前使用 Node.js 通配符作为临时修复来显示 404 页面并仍然保留预期的 URL。 （缺点是它先重定向到主页，但它有效）。

我明白，但在我的示例中，浏览器会保留预期的 URL，并且仅根据您的要求显示 404 页面内容。至少在我目前正在进行的项目中。

你的也应该可以工作 :) 虽然我无法测试它，因为我的应用程序在 Heroku 上，并且 node.js 是一种更安全的方式。但我很快就会这样做，并在测试时给你 +1。