vue+ts配置路径别名后ts报错

如题，vue 初学者，按照网上教学配置的，新建了一个空项目，最后得到 Failed to compile.整个操作复现如下：1、安装 node 和 npm install -g @vue/cli ,脚手架版本 4.22、新建目录，然后 vue create project3、cd project && npm install vue-router --save &&...

在tsconfig.json中添加下面的配置即可 { "compilerOptions": { "paths": { "/@/*": ["src/*"] } } }

上图点击【扩展设置】后进入下图点击上图的【步骤 2】之后，进入下图的 【settings.json】文件中，添加下列框出的代码、 以上是下载的插件的基本配置接下来是取别名的配置如果没有jsconfig.json文件，那就自己建一个（！！！名字要一摸一样） 以上情况就基本上成功了，如果@路径还不生效的话 ，看看自己的文件中是否使用了tsconfig.json文件， 如果有的话，需要在tsconfig.json中添加配置 "allowJs": true， 最后就成功啦！！！！！.........

【代码】vue3和TS引入路径报错：Cannot find module ‘@/types‘ or its corresponding type declarations.

2、import { resolve } from 'path'需要@types/node依赖支持。tcconfig.js中：webstorm识别。1.配置websorm识别alias别名。

本文详细介绍了在Vite+Vue3+TypeScript项目中配置路径别名的完整流程，从基础环境准备到Vite和TypeScript的同步配置，再到编辑器智能提示设置。文章针对常见的路径别名报错问题提供了解决方案，并分享了多级别名、动态配置等高级技巧，帮助开发者提升项目可维护性和开发效率。

首先正常引入@别名是在vite.config.js中。如果出现@路径报错标红。

对于使用 Vite 的项目，需要在vite.config.ts文件中配置路径别名。在 Vue 3 中使用 @ 作为引用根目录（通常是 src 目录）报错，通常是因为配置未正确设置或者配置未被项目正确识别。

‌在项目中设置路径别名后仍然出现爆红问题，通常是由于配置不完整或配置错误导致的。：让代码编译通过：让代码编辑器语法验证通过一.vite.config.tsresolve: {alias: {// 相对路径别名配置，使用 @ 代替 src},},});如果你的项目引入path报错，则需要下载二.tsconfig.json...其他代码// 路径"paths": {},

我在做vue3+vite+ts项目的时候，在配置别名这一步的时候遇到了一个问题，使用@引入会报错，如下图所示。import path from ‘path‘ 有波浪线警告解决办法。建议使用pnpm安装types/node 20.14.5版本,2. 不在提示报错, .vue后缀必写,不想写的可以去找一下配置,我使用npm 安装不了types/node,一直安装报错。1. 有了src文件下文件提示。

引入文件红色波浪线提示

在实际项目中，我们通常可以将 src 目录通过设置别名为 @ 目录，这样引入文件时候可以一目了然而且使用起来非常方便，可以提高我们的开发效率。

这里的前提是，文件路径以及文件已存在的情况下还是报错。

进行报错是：是因为继承的 tsconfig 开启了。这时我们可以配置相应的别名，还得在。里手动把 @ 指到 src。，它不强制校验这些裸模块路径。去引入组件时，会报错。

vue-router官方中文文档：https://router.vuejs.org/zh/introduction.html。vite初始化项选择了ts， 引入"path"模块时便会导致ts类型检查提示错误，找不到模块“path”或其相应的类型声明。main.ts引入import App from './App.vue'会报错。需要创建一个shims-vue.d.ts文件，写如下代码就不会报错了。切换至项目目录下，安装初始依赖环境。npm run dev跑项目代码。

vite+vue3.2项目中使用@路径，报错处理

本文详细解析了在TypeScript+Vue3项目中配置路径别名时WebStorm报错的根本原因与解决方案。通过分步配置Vite的resolve.alias、tsconfig.json的paths以及关键的tsconfig.app.json，确保构建工具、类型检查与IDE智能提示协同工作，最终彻底消除恼人的“Cannot find module”错误提示。

Vite2 + Vue3 + TS 使用别名时跟 webpack 有所差异这里记录下 Vite + Vue3 + TS 配置别名主要是修改和。