Quasar PWA+SSR生产构建无服务端渲染代码问题求助

核心配置检查 #

首先确认quasar.config.js中SSR与PWA的启用状态及关键配置：

• SSR配置：确保ssr.enabled设为true，同时检查extendSSRWebpackConf（Webpack版）或extendViteConf（Vite版）中没有添加禁用服务端渲染的逻辑。
• PWA配置：Quasar中SSR与PWA兼容需使用injectManifest模式，而非默认的generateSW，因为generateSW生成的Service Worker会拦截初始请求，覆盖SSR响应。示例配置：

  pwa: {
    enabled: true,
    workboxMode: 'injectManifest',
    injectManifest: {
      swSrc: 'src-pwa/custom-service-worker.js'
    }
  }
  

构建与启动流程验证 #

1. 生产构建完成后，SSR产物默认生成在dist/ssr目录下，需进入该目录执行node index.js，而非项目根目录运行。
2. 查看构建日志，确认是否包含Building SSR server bundle、Generating SSR client bundle等输出，若缺失说明构建过程中SSR模块未被触发。

PWA与SSR冲突排查 #

若单独构建SSR（quasar build -m ssr，暂禁用PWA）可正常生成渲染代码，问题大概率出在PWA配置：

• 检查自定义Service Worker文件（src-pwa/custom-service-worker.js），确保未拦截初始HTML请求，避免SSR响应被缓存覆盖。
• 生产环境下，Service Worker应仅缓存静态资源，不要处理SSR的路由请求。

环境与依赖检查 #

• 确认@quasar/cli、@quasar/app-vite/@quasar/app-webpack为最新兼容版本，版本不兼容可能导致构建逻辑异常。
• 检查src-ssr/server.js（若自定义），确保没有错误的条件判断（如错误的路由拦截）导致跳过SSR渲染。
• 验证生产构建时NODE_ENV是否设为production，Quasar会根据环境变量调整构建行为。

调试步骤 #

1. 禁用PWA配置，单独构建并启动SSR，验证是否正常生成渲染代码。
2. 若单独SSR正常，逐步启用PWA配置，每次构建后测试，定位冲突项。
3. 打开浏览器开发者工具，查看Network面板的初始HTML请求响应：若响应为空白模板而非SSR渲染的内容，需排查Service Worker是否拦截了请求（可在Application面板临时禁用Service Worker测试）。

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