Vite+React项目中配置别名后无法导入组件，路径报错怎么办？

迷人的晟华提问于 2026-02-14 19:05:26 阅读 18

框架

在用Vite搭建React项目时，我按文档配置了@别名指向src目录，但导入组件时总提示404错误。比如这样写：


// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    alias: {
      '@': '/src/'
    }
  }
});

然后在组件里这样导入：import Header from '@/components/Header'，启动时却显示：

Cannot find module ‘@/components/Header’。已经重启过服务，路径写法也检查了没问题，这是哪里配置错了？

React生态性能优化组件设计

我来解答赞 2 收藏

反馈

2 条解答

___振巧 Lv1

最简单的办法，把别名配置里的路径前缀改对。Vite的别名路径需要使用绝对路径而不是相对路径，直接用path.resolve来处理。

import { defineConfig } from 'vite';

import path from 'path';



export default defineConfig({

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src')

    }

  }

});

记得同时检查下tsconfig.json或jsconfig.json里也要配上一样的路径映射，不然编辑器还是会报错。像这样：

{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "@/*": ["src/*"]

    }

  }

}

2026-02-17 16:15

司徒钰文 Lv1

这个问题我之前也碰到过，确实挺烦人的。你这个配置里有个小坑，Vite的路径别名配置需要使用绝对路径而不是相对路径，直接写 '/src/' 会导致解析错误。

正确的做法是用 path 模块来处理路径，像这样：



import { defineConfig } from 'vite';

import path from 'path';



export default defineConfig({

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src')

    }

  }

});

另外还要注意，除了在 vite.config.js 里配置，你得确保 tsconfig.json 或 jsconfig.json 里也有相应的配置，比如加上：



{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "@/*": ["src/*"]

    }

  }

}

这两个地方都配好，一般就没问题了。记得改完配置后要重启开发服务器，有时候热更新可能不会生效。我之前就是少了 path.resolve 这一步，折腾了好久。

对了，检查一下你的项目里是不是有其他地方覆盖了别名配置，有时候某些插件或者多环境配置可能会互相干扰。

2026-02-14 19:12