Nuxt 静态站点 404 错误页面未正确呈现动态内容

Question

编辑好的，我设法解决了未加载的错误模板。这是一个 htaccess 问题。如果我将 ErrorDocument 更改为 /sub/dirs/error.html（注意缺少的 dist 文件夹），它可以正常工作。然而，它仍然没有我真正需要的动态菜单和自动完成搜索栏的全部功能。有什么想法吗？

我的生产就绪 Nuxt 应用程序存在一些问题。我的 nuxt.config.js

中有以下内容

target: 'static',
  generate: {
    dir: '../dist',
    fallback: 'error.html'
  },

// The error part is solved, dynamic menus continue to be an issue

它按预期在 npm run generate 上正确生成了 error.html 文件。但是它不使用 layouts/error.vue 中的内容并且 header 中的动态菜单不加载它们的数据。我确定它实际上正在加载 error.html，因为我可以手动更新 HTML（通过 vscode 的标题、文本等）并且它会更新。但是，如果我直接加载错误页面（示例。com/error。html）它实际上按预期工作，正确的 error.vue 模板按预期呈现。

抛出 404 后，它还会尝试加载丢失的路由。我的设置是

pages
--categories
  --_cat-id
--_page-id

如果我遇到类似 example.com/this-page-doesnt-exist 的问题，它会抛出 404，但仍会加载页面 _page-id 并运行所有代码。这看起来不正常，我真的不想要那样。我希望它只加载错误页面和错误页面。最后，我使用 apache/htaccess 来处理 ErrorDocument。如果我删除它，它只使用 404 中内置的 apaches，这不是一个选项。我想知道重写规则中是否有可能导致此问题的内容。

 ErrorDocument 404 /sub/dirs/dist/error.html
 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sub/dirs/
    RewriteCond %{REQUEST_URI} !dist/
    RewriteRule ^(.*)$ dist/ [L]
</IfModule>

如何让我的错误页面正确呈现以及从菜单等中加载动态内容？提前致谢

Answer 1

我通过更新 htaccess 设法解决了根本无法加载的错误页面。新的 .htaccess - 从 ErrorDocument 中删除 dist。

ErrorDocument 404 /sub/dirs/error.html
 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sub/dirs/
    RewriteCond %{REQUEST_URI} !dist/
    RewriteRule ^(.*)$ dist/ [L]
</IfModule>

编辑。我有一个解决动态数据的方法。设置target:static时，错误页面似乎没有完全生成。所有其他 html 生成的页面都是完整的页面，但 error.html 不是。我无法让 asyncData 道具做任何事情。所以我创建了一个错误组件以存在于 layouts/error 文件中，然后在挂载的挂钩中我像往常一样访问了商店

async mounted(){
   await this.$store.dispatch('getStuff')
}

这最终获取了所有数据（我觉得应该在执行 npm run generate 时预取），然后我的动态内容起作用了。

Nuxt 静态站点 404 错误页面未正确呈现动态内容

Nuxt Static Site 404 Error page not rendering dynamic content correctly

vue.js

apache

nuxt.js