Django + React(Vite)项目中JavaScript加载异常求助

下面是针对你遇到的问题的排查和解决步骤：

1. 核对Vite的基础路径配置 #

Vite生产构建的资源路径必须和Django的STATIC_URL完全匹配。打开前端项目的vite.config.js，检查base配置：

// vite.config.js
export default defineConfig({
  base: '/assets/', // 必须和Django settings里的STATIC_URL一致
  // 其他原有配置...
})

修改后重新执行npm run build，再重启Django服务测试。

2. 修复Django的JS文件MIME类型 #

有时候Django会错误识别JS文件的MIME类型，导致浏览器无法正常解析。在settings.py中添加MIME类型映射：

# settings.py
import mimetypes
mimetypes.add_type("application/javascript", ".js", True)

保存后重启Django服务器。

3. 检查Vite构建的JS文件本身 #

先看浏览器控制台的具体报错信息（比如语法错误、模块引用错误）：

• 如果是语法错误：确认前端代码里的ES6+语法被Vite正确转译，可在vite.config.js中调整@vitejs/plugin-react的转译配置。
• 如果是模块加载错误：删除node_modules和dist文件夹，重新执行npm install和npm run build，确保构建过程无报错。

4. 修正Django模板的JS引用方式 #

确保模板里用{% static %}标签生成正确路径，并且Vite构建的JS需要加上type="module"属性：

<!-- 你的Django模板文件 -->
<script type="module" src="{% static 'index.xxxx.js' %}"></script>

注意替换成你实际构建后的JS文件名（Vite会自动生成带哈希的文件名）。

5. 清除浏览器缓存 #

浏览器可能缓存了旧的错误JS文件，按Ctrl+Shift+R强制刷新页面，或者在浏览器设置里清除缓存后再测试。

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