解决vue项目路径用@报错问题,,

上河雨滴

已于 2024-06-14 03:58:18 修改

阅读量589

点赞数 4

文章标签： vue.js 前端

于 2024-06-14 03:57:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54039576/article/details/139667780

版权

vue项目中不同文件src有的可以用@来加载图片, 有的文件只能用相对路径../ , 很奇怪
一般vue项目框架下载下来,默认路径可以用@ ,来替代相对路径

解决方法
清理缓存：删除node_modules目录下的.cache文件夹，或者使用IDE的清理缓存功能。

亲测有效

资料来源:

百度文言一心

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

上河雨滴

关注关注

4
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

vue3+vite+ts 配置别名@报错找不到模块

weixin_43754395的博客

11-30

4635

vue3+vite+ts配置别名@报错

vue+typescript @引用路径报错

janyxh的博客

07-27

1261

最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。那在目前的架构下，怎么使用@作为路径的开头呢？经查询vite文档，发现可以使用resolve.alias设置别称。 vite.config.ts import path from "path"; export default defineConfig({ resolve:

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

vue项目路径使用@报错

weixin_46886988的博客

08-07

806

vue项目路径使用@报错

解决Vue项目中的路径解析错误（Cannot resolve directory ‘@’）

weixin_53955862的博客

04-06

3987

在Vue项目中，您可能会遇到路径解析错误，例如“Cannot resolve directory ‘@’”。这个错误通常发生在尝试解析一个依赖或模块时，但由于路径配置不正确，导致无法找到对应的文件。这是解决js路径解析的方法，我们导入的是css。

Vue实战（08）解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题

最新发布

綦枫Maple的博客

04-24

1017

教你如何解决"@"别名在IDEA中报错无法识别的问题！

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

qq_37866866的博客

10-31

2269

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

vue 引入文件是报错

weixin_46067308的博客

09-08

469

在vue项目中引入 weui.js时候总是报错，在网上找到这么一串代码在根目录下创建 declaration.d.ts 文件写入一下内容： declare module 'weui.js' { const vis : any; export default vis }

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

m0_51354601的博客

05-11

3728

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

解决vue 项目引入字体图标报错、不显示等问题

12-02

问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错：解决方法为：把字体引入方式改为...以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希

解决vue打包后刷新页面报错：Unexpected token <

10-16

在使用Vue.js框架开发的项目中，打包后的静态文件部署到生产环境中时，遇到了页面刷新后报错“Unexpected token <”的问题。这个问题表明在解析index.html或者发生错误的页面时，解析器遇到了一个不符合预期的字符...

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

weixin_44022996的博客

11-23

1091

根目录新建jsconfig.json。

vue3+ts+vite中“@“路径失效

wsq8435的博客

07-30

1434

出现报错: ts类型错误提示找不到模块“path”或其相应的类型声明。文件有两个path，把app.json的路径删了即可。1.安装 npm i @types/node -D。最后：记得重启vscode。

idea Vue项目识别不到@别名问题

丁晓超的博客

11-25

1113

1、Vue项目创建好之后，打开文件总看见引入文件的位置有这样的波浪线

Vscode volar插件报错

weixin_52195160的博客

11-09

454

项目可以正常运行，但是一坨红看的很难受。试了卸载重装插件，还重启->卸载了vscode。今天敲项目时重启了一下ts volar插件，直接爆红。按照上述步骤走一遍就好了，不过又出来了“

vue2开发，在vue.config.js中配置了@为src下的目录路径，但是在css中使用@引入图片或公共css文件不起作用

Xiaowanzi1998的博客

10-25

303

vue2开发，在vue.config.js中配置了@为src下的目录路径，但是在css中使用@引入图片或公共css文件不起作用

用vscode时vue总是弹出报错提示框

weixin_43550562的博客

12-01

3312

打开win10 设置找到 “通知和操作” 再找到 “SnoreToast”对应的选项点击关闭即可

idea 开发vue项目，输入@符号没有路径提示问题

m0_37715184的博客

01-07

1592

在vue文件中要引入另一个组件时输入@符号，然后并没有提示文件路径，解决方法可参考一下（亲自试过，值得信赖）： https://blog.csdn.net/qq_34707272/article/details/105730090

vue引入依赖失败

love_weiai的博客

11-19

922

FetchError: Invalid response body while trying to fetch https://registry.npm.taobao.org/less: 抛出这样的错误，是因为npm引入的镜像报错我这里使用的淘宝镜像更改一下镜像安装源就可以了 # 查看自己的安装源 npm config get registry # 更换npm源为国内淘宝镜像 npm config set registry http://registry.npm.taobao....

idea中在Vue项目下不识别@别名

爱踢球的程序猿

11-12

1175

确保在项目根目录下面的Vue.config.js文件有如下配置: configureWebpack: { resolve: { alias: { '@': resolve('src') } } } 在 webstorm File > Settings > Languages & Frameworks > JavaScript > Webpack 选择当.

vite vue3 ts @报错

01-25

### 解决 Vite + Vue3 + TypeScript 路径别名 (@) 配置导致的报错问题在开发基于 Vite 和 Vue3 的项目时，使用路径别名（如 `@`）可以简化文件导入路径。然而，在配置过程中可能会遇到一些挑战，特别是在引入 TypeScript 支持的情况下。 #### 修改 tsconfig.json 文件支持路径别名为了使 TypeScript 编译器识别自定义路径别名（例如 `@`），需要更新项目的 `tsconfig.json` 文件： ```json { "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, } ``` 此设置告知编译器将任何以 `@/` 开头的模块解析为相对于 `src` 目录下的位置[^1]。 #### 更新 vite.config.ts 来处理别名转换为了让 Webpack 或者在此案例中的 Vite 构建工具理解这些别名，还需要调整构建配置文件 (`vite.config.ts`) 中的相关选项: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ resolve: { alias: [ { find: /^\/?@/, replacement: '/src/' } ] }, plugins: [vue()] }) ``` 这段代码通过插件机制告诉 Vite 如何解释并替换给定模式(`/@`)到实际物理路径(`/src/`)。 #### 安装依赖包如果尚未安装必要的库来帮助实现上述功能，则可以通过 npm/yarn 添加它们： ```bash npm install --save-dev @types/node ``` 这一步骤确保了 Node.js 类型定义被正确加载，从而有助于提高 IDE 对于路径别名的支持效果。 #### 测试更改后的配置有效性完成以上修改之后，重启开发服务器，并尝试重新运行应用程序以验证新配置是否生效。此时应该能够顺利地利用 `@` 符号作为源码根目录的快捷方式来进行组件或其他资源文件之间的相互引用而不再触发之前的错误提示。