Vite+ts+vue 别名引入能正常使用但是Vscode红线

最新推荐文章于 2024-08-13 17:59:01 发布
最新推荐文章于 2024-08-13 17:59:01 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： TS Vue3 文章标签： typescript 前端 vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41400354/article/details/124170435
版权
博客主要围绕别名引入报错问题展开，提到在vite.config.ts和tsconfig.json中进行添加操作来解决该问题，涉及前端开发中Vite和TypeScript的配置。

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

别名引入报错

  • vite.config.ts中添加
    在这里插入图片描述
  • tsconfig.json中添加
    在这里插入图片描述
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2539
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2833
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
vscode中Vue别名路径提示的实现
11-19
开发场景 当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，但是并无作用。这样容易出现路径拼写错误的低能问题，同时也会造成开发效率降低 解决方案 在项目 package.json 所在同级目录下创建文件 jsconfig.json， 来解决别名路径不提示的问题。（配置完保存文件后需要重启编辑器才能生效。而且它只能识别 .vue 和 .js结尾的文件，css文件与其他的静态文件依然没有提示， 不推荐！
vue3+ts+vite 配置‘@’之后能找到资源，但是vscode 报红
weixin_56927228的博客
08-13 576
vue3+ts+vite 配置‘@’之后能找到资源，但是vscode 报红，错误提示如下，但是实际资源能找到，例如报错：Cannot find module '@/api/market' or its corresponding type declarations.ts(2307)。 找不到模块“@/api/market”或其相应的类型声明。ts(2307)
vue3结合ts开发，导入vue文件，页面报红色的波浪线
haha_556的博客
07-22 6730
项目场景： 使用vue3框架结合ts开发时，在页面导出xxx.vue文件，就会出现报错，有红色的波浪线。 问题描述： 原因分析： ts识别不出.vue文件， 解决方案： 在根目录下面添加一个xxx.d.ts,文件，文件内容为 ![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/eb7f6ccc84e816f72ab369ccd85804c7.png) declare module '*vue' { import { Com
vscode 在标签的src引入别名路径_vue-cli 3.0配置webpack目录别名alias
weixin_39938875的博客
11-25 541
前言在Vue项目开发中，经常需要引入不同文件目录的组件，通常我们是通过“import 组件名 from ‘组件路径’”的结构来实现对组件的引用，而当文件路径较深或者引用的组件跨越的较远时很容易引用出错，这里我们就要引入alias概念了，“别名”的意思，顾名思义标准名称以外的名称。 查看webpack配置我们在引入模块的时候经常会用到一个@符号，用@符号指代根目录下的src文件夹路径，@+/就可以获...
解决用vite+ts路径没问题但是代码有红点报错的情况
m0_60289222的博客
04-04 1511
原文链接：https://blog.csdn.net/qq_52477159/article/details/129124968。注意：这个错误并不影响代码的正常运行，只是在编写代码时，import xxx from 'xxx'会一直飘红，很影响观感。产生这个问题的原因是我们使用了ts语法，他只能识别.ts文件，并不能识别.vue文件，所以在引入组件的时候报错了。在项目的根目录下创建一个xxx.d.ts文件，文件名自定义即可，后缀必须是.d.ts。保存代码，并且重启项目，这样令人不悦的红色就会消失啦。
vue3 vite ts 使用 @别名引入有红线
10-17
当你在Vue3项目中使用Vite和TypeScript，并尝试通过`@`别名导入模块时遇到红线（错误），这通常意味着Vite的alias配置可能未正确设置，或者你在TypeScript中对这种导入语法还不太熟悉。 1. **检查alias配置**：确保...
vue + ts + pinia项目搭建
Pandas_Lin的博客
06-27 912
目前，只有Vite被官方支持，不过任何实现import.meta.hot规范的构建工具都应该能正常工作。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。2. 安装pinia。
vue ts 导入 @/assets/ 红色显示的问题解决
学习笔记
06-04 643
在使用的时候这样导入会出现如上的错误。在使用的时候，导入的类型也没有对应的代码提示，说明导入有问题。
vite+ts创建项目报红问题
qq_54601164的博客
06-02 2294
查看项目“main.ts” 文件中 “import App from ‘./App.vue’” 部分报错原因，提示报错 “Cannot find module ‘./App.vue’ or its corresponding type declaration”安装vite框架（Vue3）后，项目“main.ts” 文件中 “import App from ‘./App.vue’” 部分有红色报错提示，其他文件有些import引入文件也报错。报错原因：vite使用的是ts，ts不识别 .vue 后缀的文件。
vue项目开发时，怎么让vscode提示@/的路径（vscode解决路径别名的路径提示）
九日的博客
07-21 1798
开发过程中，有时候使用@作为根目录下的src路径的别称进行资源引入，编辑器不会像是正常输入路径是给提示，导致对路径不是很熟悉的伙伴需要手动去拷贝路径名，很麻烦
vue3+vite+vant+typescript 的坑
qq_38935512的博客
10-21 638
vue3
vue3+typescript+vant3零经验开发者可用
wsxqyf的博客
11-27 1181
vue3+vant3+axios+typescript+pinia 从零开始讲解包括开发工具的用法
解决vue3+ts+vite项目报红线，提示找不到模块“./XXX.vue”或其相应的类型声明
superwa的博客
09-05 805
问题：vue3+ts+vite项目报红线，不影响使用，但看着不舒服，因为typescript只能理解.ts文件，不能理解.vue文件，所以要给.vue添加类型说明文件。打开src下的.d.ts后缀文件。
引入.vue出现红色波浪线,显示模块找不到
weixin_45724850的博客
07-23 903
文件作为一个模块，让TypeScript能够正确地识别和推断Vue单文件组件的类型。这样，在其他TypeScript文件中引入。该代码片段是用于在TypeScript中声明Vue单文件组件（.vue文件）的模块。希望以上解释能够帮助你理解这段代码的作用！如果还有其他问题，请随时提问。文件时，就可以获取到正确的类型提示和类型检查。语法来扩展全局模块定义，并指定了一个类型为。在d.ts文件中配置一下。
(vue3)引入组件标红，...has no default export 组件没有默认导出
nyf_unknow的博客
06-21 4182
由于之前安装了 Vetur 插件，Vetur 默认使用 eslint-plugin-vue，并且强制 export default 语法。TypeScript Vue Plugin 使得写法为 lang=ts 的组件能使用 *.vue 引入。Vue Language Features(Volar) 代替 Vetur 的语法高亮等功能。创建的vite+vue3+ts项目页面有标红。3.重启vscode。
vue3+vite+ts项目搭建之后，vscode文件夹下红色波浪线问题
jiaoxt_123的博客
10-20 5951
搭建完vue3+vite+ts项目之后，用vscode打开项目，发现 .vue 文件和 main.ts 文件夹下都有红色破浪线（如下图所示）。几番周折终于解决了这个问题。报错原因：vscode插件 Vetur 不支持最新写法。解决方式：卸载 并 安装 Volar 插件。报错原因：ts不识别.vue后缀的文件。2.解决vue文件波浪线提示。1. 解决.ts文件报错。
vite+ts出现红色波浪线；找不到模块“vue-router
m0_60289222的博客
05-09 4191
提示：找不到模块“vue-router”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?
Vite+Ts项目在vue文件中引入ts文件出现红色波浪线
最新发布
12-09
在使用Vite+Ts进行Vue项目开发时，如果在vue文件中引入ts文件出现红色波浪线，这通常是由于类型检查或模块解析问题引起的。以下是一些可能的原因和解决方法： 1. **类型声明文件缺失**： - 确保引入的ts文件中包含正确的类型声明。如果缺少类型声明文件，可以在项目中添加相应的`.d.ts`文件。 2. **tsconfig.json配置问题**： - 检查`tsconfig.json`文件中的配置，确保`include`和`exclude`选项正确配置。例如，确保`include`包含了所有需要编译的ts文件。 - 检查`compilerOptions`中的`module`选项，确保与项目的模块系统（如ES6）一致。 3. **模块解析问题**： - 确保在`vite.config.ts`中正确配置了模块解析。例如，可以使用`@rollup/plugin-typescript`插件来处理ts文件。 - 在`vite.config.ts`中添加以下配置： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import typescript from '@rollup/plugin-typescript'; export default defineConfig({ plugins: [vue(), typescript()], resolve: { extensions: ['.ts', '.vue', '.js'] } }); ``` 4. **依赖项问题**： - 确保所有依赖项都已正确安装。可以运行`npm install`或`yarn`来重新安装依赖项。 5. **编辑器设置问题**： - 确保编辑器的TypeScript插件或扩展已正确配置。例如，在VSCode中，可以检查`settings.json`文件中的TypeScript相关设置。 通过以上步骤，通常可以解决在vue文件中引入ts文件时出现的红色波浪线问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值