如何禁用 nuxt.js 的浏览器热模块重新加载？

Question

我有一个使用 webpack 的 nuxt 项目。

我运行npm run dev它启动一个监听localhost:3000的开发服务器。

然后，我使用反向代理 (nginx) 通过本地域名为该应用程序提供服务（例如，我可以在浏览器中使用dashboard.com/访问该应用程序，它将请求转发到localhost:3000 ）。

在浏览我的应用程序时，有时需要 40 秒才能获得响应。 当我检查 nginx 日志时， /__webpack_hmr/client的路径有问题。

1. 为什么这个页面时不时地需要 40 秒来加载（不总是，但经常）？
2. 如何修复/禁用此问题？

我不需要热模块重新加载，因为我宁愿按F5立即刷新页面，也不愿等待 40 秒因为此模块刷新页面。

这是我的package.json

{
  "name": "----",
  "version": "1.0.0",
  "description": "----",
  "author": "----",
  "private": true,
  "scripts": {
    "dev": "nuxt --no-hot ",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "debounce": "^1.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "pug-plain-loader": "^1.0.0"
  }
}

这是我的 nginx

server {
    listen 80;
    server_name dashboard.com;
    
    location / {
        proxy_pass http://localhost:3000;
    }
}

Answer 1

在nuxt 的reddit 和discord 上发帖后，nuxt 的一位核心开发者在github 中提供了以下解决方案。

在nuxt.config.js文件中，从 webpack 的插件中移除HotModuleReplacementPlugin ：

export default {
    ...
    build: {
          extend(config) {
              const hmrIndex = config.plugins.findIndex(p => p.constructor.name === 'HotModuleReplacementPlugin')
              config.plugins.splice(hmrIndex, 1)
          } 
      }
    ...
}