Question

使用Vuetify设置nuxt项目。其中一页使用client-only（no-ssr）组件。在开发过程中，如果该组件发生错误，我将被重定向到默认错误页面，这使我无法使用Vue devtools检查变量和组件。

我觉得它应该真的很简单，但是我找不到禁用这种自动重定向行为的方法。所以我想我的问题是如何禁用nuxt默认错误重定向？

Answer 1

我发现了一个使用 nuxt 插件的黑客：

./plugins/errors.js

export const ReactCsv = () => {
    const createCsvFileName = ()=> `data_${moment().format()}.csv`;
    const headers = [
        { label: 'Name', key: 'name' },
        { label: 'Description', key: 'description' },
        { label: 'SuggestedRoles', key: 'suggestedRoles' }
    ];

    let data = []
    csvData.forEach(item => {
        data.push({
            name: item.name,
            description: item.description,
            suggestedRoles: item.suggestedRoles[0].name
        });
        for (let i = 1; i < item.suggestedRoles.length; i++) {
            const role = item.suggestedRoles[i];
            data.push({
                name: '',
                description: '',
                suggestedRoles: role.name
            });
        }
    });

    return (
        <CSVLink
            data={data}
            headers={headers}
            filename={createCsvFileName()}
            target="_blank"
            style={{ textDecoration: 'none', outline: 'none', height: '5vh' }}
        >
            <Button variant="contained" color="secondary" style={{ height: '100%' }}>
                Download CSV
            </Button>
        </CSVLink>
    );
};

./nuxt.config.js

export default function({ app }) {
  app.nuxt.error = () => {}
}

Answer 2

您不能从 nuxt 配置中禁用 <nuxt-error> 渲染。

另一种方法是破解nuxt渲染，如下所示：

1/ 打开文件./node_modules/@nuxt/vue-app/template/components/nuxt.js
2/转到render(h)方法
3/ 去除错误条件以始终显示组件：

  render (h) {

    // HACK TO SKIP ERROR
    this.nuxt.err = false

    // if there is no error
    if (!this.nuxt.err) {
      // Directly return nuxt child
      return h('NuxtChild', {
        key: this.routerViewKey,
        props: this.$props
      })
    }

    // ...
  }

nb：在每次 npm 或 yarn 安装后，上面文件中的 hack 将被覆盖。

如何禁用nuxt默认错误重定向

2 个答案: