vue+typescript @引用路径报错

最新推荐文章于 2025-02-19 13:45:23 发布

janyxh

最新推荐文章于 2025-02-19 13:45:23 发布

阅读量1.2k

点赞数

分类专栏： Vue Typescript Vite

本文链接：https://blog.youkuaiyun.com/janyxh/article/details/119140221

版权

在Vite + Vue 3.0 + TypeScript环境下，遇到使用@符号进行组件绝对路径引入时出错。问题可能源于从Vue CLI迁移到Vite或由JavaScript转为TypeScript。通过查阅Vite文档，了解到可以使用`resolve.alias`在vite.config.ts中设置别名。同时，为了使TS识别，还需在tsconfig.json中进行相应配置。完成设置并重启项目后，@路径引用恢复正常。

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

最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。

想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。

那在目前的架构下，怎么使用@作为路径的开头呢？

经查询vite文档，发现可以使用resolve.alias设置别称。

vite.config.ts

import path from "path";

export default defineConfig({
   
    resolve: {
   
      alias: {
   
          '@'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

janyxh

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决vite+vue3+typescript中使用@路径映射src引入vue router和vuex报错问题

yunmengying的博客

07-01

5716

报错为找不到模块@/store（@/router）这个报错不影响使用，查明原因不是ts.config.json的路径映射配置问题，而是router和vuex的index文件是js文件，而main.ts是typescript文件，引入的router和store没有类型声明，统一修改为typescript文件后解决。文件修改如下： main.ts //vue router import router from '@/router/index' //vuex import store from '@/s

Vue3+vite+TypeScript+Vant项目搭建

VnOcean的博客

09-01

1080

本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。

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

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

2301_78772064的博客

01-21

631

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

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

m0_57836225的博客

02-19

668

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

Vue 中使用 typescript

weixin_30851409的博客

08-27

417

Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。 typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。 Typescript 5年内的热度...

typeScript不能使用vue 全局变量的问题

qq_36944793的博客

08-11

424

解决问题 vue插件+单例模式 export class RetroPlugin { /**核心 - 一个接收实例的静态成员 */ private static instance: RetroPlugin; /**核心 - 私有构造函数 */ private constructor(options: any) { this.install(Vue, options) } /**核心 - 获取实例 */ static getInstance(options:

完美解决vue+typescript中父组件调用子组件报错解决办法

不停

08-18

2398

文章目录一不用typescript时父组件调用子组件中的方法1. 子组件2. 父组件3. 结果一用typescript时父组件调用子组件中的方法一. 方法11. 子组件2. 父组件二. 方法21. 子组件2. 父组件一不用typescript时父组件调用子组件中的方法 1. 子组件 <template> <div class="echild" @click="lg"> child </div> </template> //methods

vue关于@无法找到文件报错

m0_51354601的博客

05-11

3670

如果在Vite项目中使用@无法找到文件，通常是因为未正确配置路径别名（path alias）导致的。在Vite中，您可以使用vite.config.js文件来配置路径别名。请确保将路径别名配置为与您的项目结构和实际路径相匹配。在上述示例中，我们使用alias选项来配置路径别名。通过@别名，我们将./src目录与@关联起来。//配置less @ 跨域。

搭建vite + vue3 + typescript

lemon_javascript的博客

05-01

1926

搭建vite + vue3 + typescript

娜的博客

06-04

1424

2020年9月18日，Vue.js发布版3.0One Piece（海贼王）4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。

vue在css中使用@路径报错问题

zhufan2333的博客

10-12

2606

vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。，加~前缀才会解释成模块路径（~@代表根路径）。

vite+vue3使用@路径，报错处理

m0_70547044的博客

08-21

2570

报错原因：未配置 @符号为指定路径别名，直接使用导致。

解决 vite 构建 vue3 项目 “@/“相对路径无法生效并报错

m0_68196864的博客

12-22

2638

第二步：在 vite.config.js 文件中添加以下三部分代码。第一步：安装 path 包。

Vite2 + typescript 配置路径别名@

qq_36835255的博客

05-03

1693

vue-cli 搭建的 vue 项目的路径别名配置是在 vue.config.js。vite 搭建的 vue 项目的路径别名的配置需要修改两个文件： vite.config.ts 以及 tsconfig.json vite.config.ts import { resolve } from 'path' export default defineConfig({ resolve: { alias: { "@": resolve(__dirname, 'src'),

vue3、vite使用typescript配置@路径别名

weixin_55695389的博客

08-22

864

由于node不兼容typescript，所以为了防止报红，需要先下载@types/node。完成以上步骤以后，在项目中所有用到路径的地方都可以用@/来取代src/

Vue3项目：ts通过import引入传入文件路径报找不到该模块

qq_42506385的博客

10-11

7073

前言在项目开发中需要通过封装的方法来减小体积，在封装一个异步方法时，传入的路径明明正确却报找不到浏览器报错：控制台报错： Critical dependency: the request of a dependency is an expression 我的代码： loader = () => import(path) 解决心路历程采用引入文件报错后，我尝试使用写死的路径，发现可以正常使用，没有任何问题！！！最后查看文档发现 import只能使用字符串！！ require相同。最后采

vue3 报错解决：引用路径正确，显示找不到模块

qq_39218398的博客

09-09

2244

路径正取，找不到模块

Vuex+Typescript冲突解决

Continue的博客

12-20

735

概述由于vuex对于typescript的支持不太友好，其中会遇到一系列的问题，但是也可以利用一些方法进行解决，虽然现在pinia支持更好，但是了解这些解决方式也可以更好的理解它为什么不友好，也可以方便之后避免与解决。所以本篇用来归纳vuex+ts的冲突，因为目前还在学，后续不定时补充 1.子模块的状态类型限制如下结构，store仓库下有个子模块login，内部有着和根模块一样的类型文件和导出文件对于项目需要用到多模块时，通过store可以来获取根模块的state类型，而当需要用到子模块时，往往需

vue js引用路径报错解决方案

心若向阳，无谓悲伤的博客

04-01

5038

最近在做项目的时候，需要在index.html中引用js文件，但是一直报Failed to load resource: the server responded with a status of 404。从字面上看，就是路径找不到，但是检查了一圈之后，发现路径没有错误啊。最后在浏览器调试台看到加载出来的文件的路径是这样的，在localhost:8080服务器下，先生成了本地磁盘路径，然后将s...

UniApp + Vue3 + Vite + TypeScript + Tailwind CSS项目中 import { useDebounceFn } from '@vueuse/core' 报错

最新发布

03-30

<think>好的，我现在要解决用户在UniApp + Vue3 + Vite + TypeScript + Tailwind CSS项目中遇到的`import { useDebounceFn } from '@vueuse/core'`报错的问题。首先，我需要了解这个错误可能的原因。常见的原因可能有几个： 1. **依赖未安装**：用户可能没有正确安装`@vueuse/core`包，导致导入时找不到模块。 2. **版本不兼容**：安装的VueUse版本可能与Vue3或TypeScript存在兼容性问题。 3. **TypeScript类型问题**：可能需要额外的类型声明或配置。 4. **Vite配置问题**：可能需要在Vite中配置某些选项以支持VueUse。 5. **路径或拼写错误**：检查导入语句是否有拼写错误，或者路径是否正确。接下来，我需要一步步分析每个可能性。首先，检查是否安装了正确的依赖。用户可能运行了`npm install @vueuse/core`，但可能使用了错误的版本。Vue3需要VueUse的版本至少是7.0.0以上，所以如果用户安装的是旧版本，可能会出现问题。建议用户检查package.json中的版本，并尝试升级到最新版本。然后，考虑TypeScript的问题。如果VueUse的类型定义没有被正确识别，可能需要检查tsconfig.json中的编译器选项，确保`types`字段包含`@vueuse/core`，或者检查是否存在其他配置问题。例如，确保`compilerOptions`中的`moduleResolution`设置为`node`或`bundler`，以正确解析模块路径。另外，Vite的配置也需要检查。虽然Vite通常不需要额外配置来支持VueUse，但如果项目中使用了某些特定的功能或模块导入方式，可能需要调整构建配置。例如，确保Vite的插件（如`@vitejs/plugin-vue`）已正确安装，并且支持Vue3。还有可能用户的环境存在缓存问题。有时候，node_modules或构建缓存可能导致问题，尝试清除缓存并重新安装依赖可能会有帮助。此外，查看具体的错误信息是关键。如果控制台报错信息指出无法找到模块，那么很可能是安装问题或路径错误。如果错误是关于类型不匹配或方法不存在，可能是版本问题或TypeScript配置的问题。最后，建议用户检查官方文档或VueUse的GitHub仓库，查看是否有已知问题或必要的配置步骤。如果以上方法都无效，可能需要提供一个最小化的复现代码示例，以便进一步排查问题。</think>在 UniApp + Vue3 + Vite + TypeScript + Tailwind CSS 项目中遇到 `import { useDebounceFn } from '@vueuse/core'` 报错时，可按以下步骤排查解决： ### 1. 检查依赖安装 ```bash # 确保已正确安装 @vueuse/core npm install @vueuse/core --save # 或 yarn add @vueuse/core # 检查是否安装了 vue 和 @vue/composition-api 的兼容版本 npm list vue @vue/composition-api ``` ### 2. 版本兼容性验证 - **Vue 3 要求**： ```json // package.json 中应满足以下最低版本 "dependencies": { "@vueuse/core": ">=7.0.0", "vue": "^3.0.0" } ``` ### 3. TypeScript 类型声明配置 ```json // tsconfig.json 需确保包含 { "compilerOptions": { "types": ["@vueuse/core"], "moduleResolution": "node" // 或 "bundler" } } ``` ### 4. 检查导入语法 ```typescript // 正确写法（注意大小写） import { useDebounceFn } from '@vueuse/core' // 错误写法示例（避免拼写错误） // import { useDebounseFn } from '@vueuse/core' // 拼写错误 // import { useDebounceFn } from 'vueuse' // 错误包名 ``` ### 5. Vite 配置检查 ```javascript // vite.config.js 确保已配置 Vue 插件 import vue from '@vitejs/plugin-vue' export default { plugins: [vue()] } ``` ### 6. 清理缓存 ```bash # 删除 node_modules 和 lock 文件 rm -rf node_modules rm package-lock.json # 或 yarn.lock # 重新安装依赖 npm install ``` ### 7. 验证 API 可用性 ```typescript // 在组件中测试基础功能 import { useDebounceFn } from '@vueuse/core' export default { setup() { const debouncedFn = useDebounceFn(() => { console.log('Debounced!') }, 500) return { debouncedFn } } } ``` ### 常见错误及解决方案 #### 错误 1：`Module not found: Error: Can't resolve '@vueuse/core'` - **原因**：依赖未安装或安装路径错误 - **解决**： ```bash npm install --force @vueuse/core ``` #### 错误 2：`Property 'useDebounceFn' does not exist on type 'typeof import("@vueuse/core")'` - **原因**：TypeScript 类型未正确加载 - **解决**： 1. 重启 TypeScript 服务 2. 在 `.d.ts` 文件中添加： ```typescript declare module '@vueuse/core' { export function useDebounceFn(...args: any[]): any } ``` #### 错误 3：`Cannot read property 'debounce' of undefined` - **原因**：Vue 3 Composition API 未正确初始化 - **解决**：确保 `main.js` 正确初始化： ```javascript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` ### 最终验证步骤 1. 创建最小化测试组件 2. 运行 `npm run dev` 观察控制台输出 3. 检查浏览器控制台是否有运行时错误若仍存在问题，建议： 1. 查看 [VueUse 官方文档](https://vueuse.org/) 2. 检查项目是否混用了 Vue2/Vue3 的库 3. 创建最小化复现代码仓库供进一步排查通过以上步骤，90% 以上的导入报错问题可以得到解决。关键是要确保依赖版本匹配、TypeScript 配置正确和开发环境干净。