解决 IDEA下vue3 + vite @符号无法识别的问题

最新推荐文章于 2025-04-02 21:32:17 发布

XJF_XH

最新推荐文章于 2025-04-02 21:32:17 发布

阅读量1.9k

点赞数 10

文章标签： idea 前端

本文链接：https://blog.youkuaiyun.com/Xuhai0811/article/details/134808404

版权

详细解读jsconfig.json的`compilerOptions`，如设置baseUrl和paths来管理模块路径，以及如何排除node_modules和dist，适用于JavaScript项目优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目根目录新建jsconfig.json文件

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

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

XJF_XH

关注关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

解决vite+vue3+ts中使用@路径报错的问题

2301_78772064的博客

01-21

662

解决vite+vue3+ts中使用@路径报错的问题

解决 Vue 3 + TypeScript + Vite 项目中 @ 路径识别问题

m0_57836225的博客

02-19

719

通过以上步骤，我们成功解决了 Vue 3 + TypeScript + Vite 项目中路径无法识别的问题。合理配置和文件，并理解相关配置项的含义，能够让我们的项目开发更加高效和便捷。希望本文对你有所帮助！

1 条评论您还未登录，请先登录后发表或查看评论

Webstorm无法识别Vite构建的工程的@别名符号解决方案——偷梁换柱骚操作。

weixin_45254062的博客

01-01

2386

问题简述在 2022.1 版本 Webstorm IDE 里面，创建好一个 Vite 工程之后，IDE 会提示 Cannot resolve xxx。意思就是说无法解析 @ 符号表示的路径。问题分析可能是版本比较老旧的原因，新版的 2023 就没有这个问题，因为它自身集成了 Vite 官方的语法插件。旧版的只是自己手动下载了一个第三方的 Vite Integrated 插件，可能语...

vite基础，vite中 `@`符号是不被支持，不用@符号，直接用层级（./，../等）

差不少的博客

08-09

6343

vite基础，vite中 `@`符号是不被支持，不用@符号，直接用层级（./，../等）

vue3项目无法识别@/问题

小刘的日常bug记录

06-01

1191

vue3项目无法识别@/问题。

idea 目录多项目，不能识别 vue 的 @/ 路径

qq_26408545的博客

07-22

976

原来是 idea 2023.2.1 ，突然发现 @/路径不能识别了，经确认 idea 自动升级到2023.2.4。vue项目下新建jsconfig.json ，重启idea ,idea 自动扫码索引即可识别。设置 webpack configuration file为webpath.config.js。或 File -> invalidate caches 然后点击 just restart。

Vue 项目中 “@” 别名无法识别？解决方案全解析

热门推荐

qq_43657722的博客

05-22

1万+

在使用 Vue 3 开发项目时，遇到“找不到模块 ‘@/components/xxx.vue’ 或其相应的类型声明”的错误是一个常见问题。这通常与 TypeScript 和模块解析相关的配置不当有关。本文将详细介绍如何解决此问题，确保你的项目能够正确识别和导入 Vue 组件。

【Vue3】详细解决方案：找不到模块“@/views/Login.vue”或其相应的类型声明或Failed to resolve import “@/views/Login.vue“

qq_43816375的博客

04-28

6088

在初次使用Vue3的路由懒加载时，可能你遇到了这个报错：找不到模块“@/views/Login.vue”或其相应的类型声明或者Failed to resolve import "@/views/Login.vue"或找不到模块“path”或其相应的类型声明。那么此文章，是此报错的一系列详细解决方案。

基于 Vue3 + Vite + TS 的移动端 rem 适配技术详解

12-09

使用场景及目标：本指南适用于正在进行移动端开发的团队和个人，旨在帮助他们掌握 Vue3 + Vite + TS 架构下实现 rem 适配的具体方法，从而提升应用的用户体验。阅读建议：在阅读本文档时，建议实际操作并结合项目...

vue3+vite+qiankun+monorepo框架

08-03

vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...

Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版

04-03

Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。首先，Vue3...

vue3 + vite + ts 后台管理系统模板.zip

01-02

Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。适用于初学者和有经验的开发者...

vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

04-02

Vue3 是 Vue.js 框架的最新主要版本，它带来了许多性能优化和开发体验的提升。相较于 Vue2，Vue3 引入了 Composition API，使得组件的状态管理和逻辑更加模块化，提高了代码复用性和可读性。Vue3 还支持响应式系统...

Vue3+Vite 解决“找不到模块“@/components/xxx.vue”或其相应的类型声明 ts(2307)”

YUELEI118的博客

08-22

1468

【代码】Vue3+Vite 解决“找不到模块“@/components/xxx.vue”或其相应的类型声明 ts(2307)”

解决 IDEA下VUE项目 @符号无法识别的问题

weixin_44022996的博客

11-23

1066

根目录新建jsconfig.json。

Vue3学习-用 vite@latest 初始化项目后，遇到无法识别 .vue 文件

灬Manong 博客

05-23

702

2.在 tsconfig.json 文件， include配置项后添加。1.安装依赖 typescript-vue-plugin。2.在根目录 tsconfig.json 文件中添加。1.根目录创建 env.d.ts，添加。

vue3+vite@指向设置

02-18

### Vue 3 Vite 配置路径别名 Alias Setup 在 Vue 3 使用 Vite 构建工具时，配置路径别名可以简化模块导入语句并提高项目的可维护性。通过修改 `vite.config.ts` 文件中的 `resolve.alias` 属性来设置别名。 #### 修改 vite.config.ts 文件为了定义路径别名，在 `vite.config.ts` 中引入 `path` 模块，并利用其方法创建绝对路径： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ resolve: { alias: { '~/': `${path.resolve(__dirname, './src')}/`, // 可以继续添加更多自定义别名映射 } }, plugins: [ vue(), /* 插件列表 */ ] }); ``` 上述代码片段展示了如何为源码目录 (`./src`) 设置一个名为 `'~/'` 的别名[^1]。 #### 更新 tsconfig.json 文件为了让 TypeScript 编译器识别这些新的路径别名，还需要编辑 `tsconfig.json` 文件加入相应的编译选项: ```json { "compilerOptions": { ... "baseUrl": ".", "paths": { "~/*": ["./src/*"] } } } ``` 此部分配置告知 TypeScript 将任何以 `"~/..."` 开头的导入视为相对于项目根下的 `src` 文件夹内的资源请求。完成以上两步之后重启开发服务器使更改生效即可正常使用新设定好的路径别名了。