Vite构建React项目部署后出现net::ERR_HTTP2_PROTOCOL_ERROR 200错误

使用Vite构建React应用，Vite配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import commonjs from 'vite-plugin-commonjs';
import { APP_URL_BASENAME } from './src/constants/Config';

export default defineConfig(() => {
  return {
    plugins: [react(), commonjs()],
    base: APP_URL_BASENAME ? APP_URL_BASENAME : '/blahblah/',
    define: {
      'process.env': process.env, 
    },
  };
});

执行vite build命令得到dist文件夹，部署到服务器后出现以下错误：

GET https://dev-apps.yada.com/project/assets/index-ASXLc9JY.js
net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK)

异常点：

• 该JS文件确实存在于服务器对应路径下
• 直接访问该文件URL能正常返回内容
• 直接访问该文件后返回应用，整个应用可正常加载

• 核对base配置与服务器部署路径：确认APP_URL_BASENAME的值是否和服务器的实际部署路径一致（比如当前部署路径是/project/，则base应设为/project/）。虽然文件能直接访问，但index.html中引用资源的路径可能因base配置不匹配，导致服务器在处理HTTP2请求时出现异常。
• 检查服务器HTTP2推送配置：部分服务器开启HTTP2服务器推送后，若推送规则配置错误（比如推送了已缓存的资源），会触发该协议错误。尝试关闭服务器的HTTP2推送功能，或调整推送规则只推送必要资源。
• 验证资源响应头与文件一致性：检查服务器返回的Content-Length、ETag等响应头是否和文件实际信息匹配。HTTP2对响应头的准确性要求更高，若Content-Length与文件实际大小不符，会触发错误。可通过curl -I <资源URL>查看响应头，对比文件实际大小。
• 移除vite-plugin-commonjs插件测试：若项目无需兼容CommonJS模块，尝试移除该插件后重新build部署。部分场景下该插件的转译逻辑可能导致build后的资源在HTTP2环境下出现加载异常。
• 禁用Vite build缓存：执行build时添加--no-cache参数（vite build --no-cache），避免旧缓存文件导致的资源不匹配问题。同时可检查服务器对静态资源的缓存配置，确保Cache-Control设置合理。

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