Vite 中 ReactJS 组件和页面的绝对路径的正确语法是什么？

Question

我需要有关 Vite(React) 相对 src 中绝对路径的帮助。我想使用下一个路径，例如：“components/Main/Main”，或者如果这是页面文件夹，则使用相同的“pages/Home/Home”

我尝试了许多不同的配置，但对我来说没有任何作用，所有这些都以 exmaple 开头：

import { Header } from 'src/components/Header/Header' 

但我想要没有 src/

Answer 1

如果要在 Vite（React）中导入不使用 src/ 前缀的组件或页面，可以在 Vite 项目中配置模块分辨率。默认情况下，Vite 在模块解析中包含 src/ 前缀，以更好地控制文件包含。

要实现所需的行为，您需要更新 vite.config.js 文件中的resolve.alias 配置。这是一个示例配置，允许导入不带 src/ 前缀的组件和页面：

    // vite.config.js
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';

// Resolve aliases
const aliases = {
  '/@/': path.resolve(__dirname, 'src') // Replace 'src' with your actual source directory
};

// Vite configuration
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: aliases
  }
});

通过上述配置，您可以使用下一个路径格式导入组件或页面：

import { Header } from '@/components/Header/Header'; // Component import
import Home from '@/pages/Home/Home'; // Page import

确保将别名对象中的“src”替换为源目录的实际名称（如果不同）。

Answer 2

如果您不想在导入路径前添加

@

前缀（如另一个答案中所示），您可以在 vite 配置中指定要解析的各个目录：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  resolve: {
    alias: {
      components: '/src/components',
      utils: '/src/utils',
      // ...etc.
    }
  }
});