使用 Vite + React JS 以绝对路径导入时不允许使用 MIME 类型

Question

当我设置 Vite 以使用绝对路径加载组件时，我收到此 MIME 类型不允许的控制台错误。

vite.config.js:

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

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

jsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

进口：

import Container from '@/Components/UI/Container/Container';

有什么解决办法吗？

Answer 1

以下配置对我有用。它是为 vueJs 设置的，但也适用于 react

在vite.config.js

import { defineConfig } from 'vite'

从“@vitejs/plugin-react”导入反应；从 'path'

导入路径

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

在jsconfig.json

 {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The configs are from here

使用 Vite + React JS 以绝对路径导入时不允许使用 MIME 类型

MIME type not allowed when importing with absolute path with Vite + React JS

reactjs

vite