Nuxt.js 3生产环境部署后周期性出现Unicode乱码问题求助

问题详情 #

• 技术栈：Nuxt.js v3，生产环境采用PM2部署
• 部署流程：执行pnpm run build构建代码，通过pm2 start ecosystem.config.cjs启动守护进程，初期网站运行正常
• 故障表现：运行2-4周后，网站内容消失，所有用户看到随机Unicode字符；故障出现时构建、运行阶段无报错，HTTP响应状态码为200
• 临时恢复方式：重新构建项目并重启PM2后，网站恢复正常，可维持数周
• 排查尝试：已排除部分依赖定位问题，但故障仍周期性出现

项目依赖列表 #

{
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/i18n": "8.0.0-rc.5",
    "@typescript-eslint/parser": "^6.14.0",
    "@vite-pwa/nuxt": "^0.1.2",
    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.0.1",
    "nuxt": "^3.8.2",
    "nuxt-delay-hydration": "^1.3.3",
    "nuxt-gtag": "^2.0.5",
    "nuxt-schema-org": "3.2.3",
    "typescript": "^5.3.3",
    "vue": "^3.3.12",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.25"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-alignment": "^40.2.0",
    "@ckeditor/ckeditor5-build-classic": "^40.2.0",
    "@ckeditor/ckeditor5-find-and-replace": "^40.2.0",
    "@ckeditor/ckeditor5-font": "^40.2.0",
    "@ckeditor/ckeditor5-highlight": "^40.2.0",
    "@ckeditor/ckeditor5-horizontal-line": "^40.2.0",
    "@ckeditor/ckeditor5-html-embed": "^40.2.0",
    "@ckeditor/ckeditor5-page-break": "^40.2.0",
    "@ckeditor/ckeditor5-remove-format": "^40.2.0",
    "@ckeditor/ckeditor5-source-editing": "^40.2.0",
    "@ckeditor/ckeditor5-special-characters": "^40.2.0",
    "@ckeditor/ckeditor5-theme-lark": "^40.2.0",
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
    "@nuxt/image": "^1.1.0",
    "@pinia/nuxt": "^0.5.1",
    "@vuepic/vue-datepicker": "^7.4.1",
    "boxicons": "^2.1.4",
    "date-fns": "^3.2.0",
    "filepond-plugin-file-validate-size": "^2.2.8",
    "filepond-plugin-file-validate-type": "^1.2.8",
    "filepond-plugin-image-preview": "^4.6.12",
    "h3-compression": "^0.3.2",
    "isomorphic-dompurify": "^1.12.0",
    "js-sha512": "^0.8.0",
    "medium-zoom": "^1.1.0",
    "slugify": "^1.6.6",
    "sweetalert2": "^11.10.1",
    "vue-dompurify-html": "^4.1.4",
    "vue-filepond": "^7.0.4",
    "vue3-carousel-nuxt": "^1.1.0"
  }
}

排查与解决方向 #

1. 监控PM2进程内存，排查泄漏 #

• 用pm2 monit实时监控进程内存占用，确认是否存在内存泄漏导致资源耗尽，引发响应内容异常
• 在ecosystem.config.cjs中配置内存阈值自动重启：

  module.exports = {
    apps: [{
      name: 'nuxt-app',
      script: './.output/server/index.mjs',
      max_memory_restart: '500M', // 内存超过500M时自动重启
      // 其他现有配置
    }]
  }
  

2. 临时禁用h3-compression测试 #

依赖中的h3-compression负责响应压缩，长期运行可能出现压缩逻辑异常导致乱码。尝试在Nuxt配置中移除该模块，观察故障是否复现。

3. 升级Nuxt及核心依赖 #

当前Nuxt版本为3.8.2，较旧版本可能存在长期运行的内存泄漏或渲染Bug。执行以下命令升级到最新稳定版：

pnpm upgrade nuxt@latest
pnpm upgrade vue@latest vue-router@latest

4. 配置PM2定期重启 #

在ecosystem.config.cjs中添加定时重启策略，避免进程长期运行积累问题：

module.exports = {
  apps: [{
    name: 'nuxt-app',
    script: './.output/server/index.mjs',
    cron_restart: '0 0 * * *', // 每天凌晨0点自动重启
    // 其他现有配置
  }]
}

5. 检查服务器磁盘与缓存 #

• 检查服务器磁盘健康状态，排查是否存在IO读写异常导致静态资源/渲染内容读取错误
• 定期清理服务器系统缓存，避免缓存异常引发内容解析错误

内容的提问来源于stack exchange，提问作者Vladyslav Stopin