部署至Google App Engine的Nuxt应用缺失JavaScript文件求助

问题描述 #

将Nuxt（2.16.3）应用部署至Google App Engine后，持续出现两个固定文件名的JavaScript文件缺失问题，示例路径如/_nuxt/875bbc0.js、/_nuxt/615cbed.js：

• 这些文件未包含在client.manifest.json中，也不存在于.nuxt/dist/client构建目录内
• 页面头部通过<link rel="preload" href="/_nuxt/875bbc0.js" as="script">引入了这些文件，但它们未出现在Nuxt构建输出日志及.nuxt文件夹内的任何引用中
• 已排除浏览器缓存问题（清理缓存、无痕模式访问均无效），本地开发环境运行完全正常
• 尝试过的排查操作：在app.yaml中设置JS文件缓存过期时间为0d 0h，删除现有GAE服务及调度规则后重新部署同名新服务，问题依旧

当前app.yaml中相关配置：

- url: /_nuxt
  static_dir: .nuxt/dist/client
  secure: always
  expiration: "0d 0h"

可能的解决方案 #

1. 清理Nuxt构建缓存并重新构建 #

• 删除本地构建残留文件：执行rm -rf .nuxt node_modules package-lock.json
• 重新安装依赖并构建：npm install && npm run build
• 构建完成后，再次确认.nuxt/dist/client目录和client.manifest.json中是否仍无缺失文件的痕迹

2. 检查GAE部署的文件同步规则 #

• 查看.gcloudignore文件，确认没有将.nuxt/dist/client目录或相关文件排除在外
• 部署时直接使用本地已构建好的产物：确保执行npm run build后，再运行gcloud app deploy，避免部署过程中触发云端异常构建

3. 调整Nuxt的Webpack chunk拆分配置 #

在nuxt.config.js中修改构建配置，强制规范chunk生成规则：

export default {
  build: {
    // 禁用自动拆分chunk，避免生成无法追踪的文件
    splitChunks: {
      layouts: false,
      pages: false,
      commons: false
    },
    // 明确chunk文件名规则
    filenames: {
      app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
      chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js'
    }
  }
}

4. 禁用或自定义Nuxt的资源预加载规则 #

在nuxt.config.js中调整resourceHints配置，避免自动生成不存在的preload链接：

export default {
  render: {
    // 直接禁用自动预加载生成
    resourceHints: false
  }
}

若需要保留预加载功能，可通过自定义配置指定需要预加载的文件，避免生成无效链接

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