Vite+React配置绝对路径导入报MIME type not allowed错误如何解决？

错误核心原因 #

你配置中的vite.config.js的alias规则写法错误：path.resolve(__dirname, '/src')中/src属于系统根路径写法，会让Vite去系统根目录查找src文件夹，而非当前项目根目录下的src，导致组件路径解析失败，Vite返回404对应的HTML页面，浏览器将HTML识别为JS模块加载就会触发MIME类型不匹配错误，对应报错截图如下：

修复步骤 #

• 修改vite.config.js的alias配置，将/src改为./src指向当前项目的src目录，修改后完整配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
const path = require('path');

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
  }
});

• 你当前的jsconfig.json配置是正确的，无需修改，仅需保证该文件放在项目根目录即可。
• 完全重启Vite开发服务，配置修改后必须重启才会生效，重启后即可正常使用@开头的绝对路径导入组件。

可选检查项：如果修改后依然报错，检查导入路径里的文件夹名称大小写是否和实际文件结构一致，部分系统对路径大小写敏感，大小写不一致也会触发路径解析失败。

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