Vite构建后React输入框onChange事件失效问题求助

可能的原因及对应解决方案 #

1. 代码压缩优化导致逻辑异常 #

Vite默认生产环境会用terser压缩代码，部分场景下可能误优化了输入框的状态更新逻辑。可以先临时关闭压缩验证：
修改vite配置：

export default defineConfig({
  base: './',
  plugins: [react()],
  build: {
    manifest: true,
    minify: false, // 临时关闭压缩
    rollupOptions: {
      input: '/src/main.jsx',
      output: {
        entryFileNames: `assets/main.js`,
        chunkFileNames: `assets/main_chunk.js`,
        assetFileNames: `assets/main.css`
      }
    },
  }
})

重新执行vite build，如果问题消失，说明是压缩导致的。可以换用esbuild作为压缩工具：

build: {
  minify: 'esbuild'
}

2. Rollup输出命名存在冲突风险 #

你自定义的输出命名中，入口文件和chunk文件都使用main前缀，可能引发资源加载或作用域冲突。先尝试用默认输出配置：

rollupOptions: {
  input: '/src/main.jsx'
  // 移除自定义的output配置
}

构建后验证问题是否解决，再重新调整命名规则避免冲突。

3. Vite React插件版本存在bug #

旧版本的@vitejs/plugin-react可能存在生产环境的兼容问题，尝试更新插件：

npm update @vitejs/plugin-react
# 或
yarn upgrade @vitejs/plugin-react

更新后重新构建项目检查问题。

4. 手动验证输入事件是否正常触发 #

在build后的页面控制台，手动触发输入事件，看状态是否能更新：

document.querySelector('input[type="text"]').dispatchEvent(new Event('input', { bubbles: true }))

如果手动触发能更新状态，说明是输入事件被全局脚本意外阻止，需要排查页面中的全局事件监听逻辑。

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