Vite React项目修改JSX内容后构建未生效问题求助

排查步骤与解决方案 #

1. 确认文件引用正确性 #

• 检查修改的文本数组所在JSX文件，是否是项目实际使用的文件，避免误改备份或未被导入的副本。
• 核对该文件的导入路径，确保没有拼写错误或路径引用错误导致加载旧文件。

2. 清理Vite专属缓存 #

Vite有独立的缓存目录，和npm缓存不互通，执行对应命令清理：

# Mac/Linux
rm -rf node_modules/.vite

# Windows
rmdir /s /q node_modules\.vite

3. 检查build脚本与环境配置 #

• 打开package.json确认build脚本为vite build，无额外错误参数：

  "scripts": {
    "build": "vite build"
  }
  

• 若使用环境变量，确认build时加载的配置未覆盖你的文本数组内容。

4. 手动清理构建产物与临时目录 #

直接删除项目根目录下的dist文件夹和node_modules/.vite缓存目录，再重新执行vite build，彻底清除旧文件残留。

5. 排查Vite配置异常 #

你的当前vite.config.js无明显问题，可临时添加禁用缓存的配置测试：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env': env
    },
    plugins: [react()],
    cacheDir: false // 临时禁用缓存，验证是否生效
  }
})

6. 验证开发与生产环境一致性 #

先确认vite serve开发环境中修改的下拉框文本已生效：

• 若开发环境未生效，优先排查代码引用问题；
• 若开发环境生效但build后不生效，重点聚焦构建缓存与生产环境配置差异。

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