Nuxt：asyncData 和 Fetch 不会在浏览器重新加载时运行

Question

重新加载浏览器时，asyncData 和 Fetch 仅在后端运行，不在浏览器中。

为了消除其他问题，我使用以下设置设置了一个空白 Nuxt 安装：

项目名称 testproject
项目描述我的发光 Nuxt.js 项目
使用自定义服务器框架无
选择要安装的功能 Linter / Formatter，Prettier
使用自定义 UI 框架 无
使用自定义测试框架 无
选择渲染模式通用
选择包管理器npm

我将整个 pages/index.vue 替换为：

<template>
  <h1>Hello world</h1>
</template>

<script>
export default {
  asyncData: function() {
    console.log('async data')
  },
  fetch: function() {
    console.log('fetch')
  }
}
</script>

为了允许控制台日志，我更改了.eslintrc.js：

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  }

它适用于第一次加载和导航，但不适用于浏览器重新加载（用户启动的命令-R，或重新加载按钮单击）。在最新的 chrome 中测试）。

Answer 1

在我这边工作完全正常@jakub-záruba。
也许尝试使用npx create-nuxt-app <project-name> 设置项目。这将采用今天的最新版本 (v3.4.0)。也许您确实有旧的 CLI？

这是我在 cmets 中询问的以文本形式编写的项目设置（即使它完全可以在 Github 存储库中找到）

Programming language: JS
Package manager: yarn
UI framework: none
Nuxt modules: none
Linting tools: ESlint + Prettier
Testing Framework: none
Rendering mode: Universal
Deployment target: Server
Development tools: None
Continuous integration: None
Version control system: Git

这是我的代码

<template>
  <h1>Hello world</h1>
</template>

<script>
export default {
  fetch() {
    console.log('fetch 33')
  },
  asyncData() {
    console.log('async data 33')
  },
}
</script>

工作得很好！

我托管了my code on Github，如果您想下载它并检查它在您这边是否无法正常工作，我们或许可以更好地调试它。