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

Question

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

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

项目名称测试项目
项目描述我发光的Nuxt.js项目
使用自定义服务器框架无
选择要安装的功能更漂亮的Linter / Formatter
使用自定义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',
  }

它在第一次加载和导航时有效，但在浏览器重新加载时无效（用户启动的Command-R或单击重新加载按钮）。经过最新的chrome测试）。

Answer 1

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

这是我的项目设置，按照评论中的要求写成文本（即使它完全可以在 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，如果您想下载它并检查它在您这边不起作用，我们可能可以更好地调试它。