vite项目中使用@代表根路径问题及解决

更新时间：2026年07月01日 08:38:47 作者：Jyann~

解决Vite配置vite.config.ts时路径报错问题,需在tsconfig.json中添加baseUrl和paths配置,同时处理path和__dirname找不到模块的问题

1.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

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

2.报错path和__dirname

找不到模块“path”或其相应的类型声明。
找不到名称“__dirname”

npm i path -D

npm install --save-dev @types/node

3.vue文件中引入文件报错

Cannot find module '@/api/index' or its corresponding type declarations.

import { chunk } from "@/api/index"

解决：

在 tsconfig.json的compilerOptions下加上 baseUrl 和 paths 即可。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3+Vite+TS使用elementPlus时踩的坑及解决
这篇文章主要介绍了Vue3+Vite+TS使用elementPlus时踩的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
封装一个Vue文件上传组件案例详情
这篇文章主要介绍了封装一个Vue文件上传组件案例详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
vue.js将时间戳转化为日期格式的实现代码
这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
vue.js内置组件之keep-alive组件使用
keep-alive是Vue.js的一个内置组件。这篇文章主要介绍了vue.js内置组件之keep-alive组件使用,需要的朋友可以参考下
2018-07-07
基于Vue3+ElementPlus+xlsx的通用表格导出方案
在前端开发中,将复杂的 el-table 表格导出为 Excel 是一个高频需求,特别是当表格包含多级表头、合并单元格以及自定义计算列时,传统的导出方案往往不理想,本文将分享一套基于 Vue3 + Element Plus + xlsx 的通用解决方案,需要的朋友可以参考下
2026-02-02
vue3如何使用postcss-px-to-viewport适配屏幕
这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue3父子同信的双向数据的项目实现
我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢，本文就来详细的介绍一下，感兴趣的可以了解一下
2023-08-08
详解vue的hash跳转原理
这篇文章主要介绍了vue的hash跳转原理，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
解决Vue-cli无法编译es6的问题
这篇文章主要介绍了解决Vue-cli无法编译es6的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
webpack+vue中使用别名路径引用静态图片地址
这篇文章主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11