显示错误如下

解决办法

  1. vite.config.js 中添加配置,配置'@'的别名

import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})
  1. 项目重新编译后就可以正常识别了

错误原因

idea识别别名错误

配置分析

  • resolve.alias: 表示设置路径别名的配置选项。
  • '@': 别名,这里代表根目录下的src目录。
  • fileURLToPath(new URL('./src', import.meta.url)): 这是一个函数调用,用于生成路径别名。它将当前文件的URL(即vite配置文件的URL)与相对路径'./src'组合起来,然后将其转换为文件系统路径。

综合起来,这段配置的作用是将'@'别名映射到项目的src目录,方便在项目中使用'@'来引用src目录下的文件或模块。

idea无法解析目录@/xxx的更多相关文章

  1. 第零章 dubbo源码解析目录

    第一章 第一个dubbo项目 第二章  dubbo内核之spi源码解析 2.1  jdk-spi的实现原理 2.2 dubbo-spi源码解析 第三章 dubbo内核之ioc源码解析 第四章 dubb ...

  2. MVC源码解析 - 目录

    尽管MVC6和MVC4,5已经有很大不同, 但是, 作为一个普通开发人员, 还真没有资格去选择使用哪个版本. So, 尽管已经是old的版本, 还是再次花点时间去温故知新. 我记得在15年初的时候, ...

  3. wordpress源码解析-目录结构-文件调用关系(1)

    学习开源代码,是一种很快的提升自己的学习方法.Wordpress作为一个开源的博客系统,非常优秀,应用广泛,使用起来简单方便,具有丰富的主题和插件,可以按照自己的需求来任意的进行修改.所以就从word ...

  4. 黄聪:wordpress源码解析-目录结构-文件调用关系(转)

    Wordpress是一个单入口的文件,所有的前端处理都必须经过index.php,这是通过修改web服务器的rewrite规则来实现的.这种做法的好处是显而易见的,这样URL更好看,不必为每一个url ...

  5. NOIP提高组2018试题解析 目录

    重磅来袭! 本蒟蒻准备挑战一下NOIP2018提高组的试题啦(怎么办 我猜我连10分都拿不了) 目录: Day1 1.铺设道路   讲解  得分:100 2.货币系统   讲解 3.赛道修建   讲解 ...

  6. netty源码解析目录

    第一章 java nio三大组件与使用姿势 二.netty使用姿势 三.netty服务端启动源码 四.netty客户端启动源码 五.NioEventLoop与netty线程模型 六.ChannelPi ...

  7. JQuery源码解析 目录

    1. a.$查询符号就是放在沙盒里面的: window.jQuery = window.$ = jQuery; b.一个jQuery对象无 new 构造: eg: $("#text" ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 --索引目录

        Sharepoint学习笔记—习题系列--70-576习题解析  为便于查阅,这里整理并列出了70-576习题解析系列的所有问题,有些内容可能会在以后更新. 需要事先申明的是:     1. ...

  9. Apache反向代理解析二级目录/泛目录教程/apache反向代理/apache泛目录反向代理

    同nginx一样,apache解析目录不需要安装任何东西,在配置文件里加入解析规则即可.解析规则: <IfModule mod_proxy.c> ProxyPreserveHost On ...

  10. II、Vue的项目目录结构 一些语法

    Vue目录结构 这是某闭源项目的web端目录结构: 目录解析: -目录/文件 - build 项目构建(webpack)相关代码 config 配置目录.端口号:也有默认的 node_modules ...

随机推荐

  1. 【Azure Logic App】使用Outlook.com发送邮件遇到429报错

    问题描述 在Logic App中使用 Outlook.com组件发送邮件,遇见了outlook connection报429的错误 {"error":{"code&quo ...

  2. 【Azure Developer】AAD API如何获取用户“Block sign in”信息(accountEnabled)

    问题描述 使用API获取所有Azure AD中的用户列表,API所参考的文档:https://docs.microsoft.com/en-us/graph/api/user-list?view=gra ...

  3. 【Azure Developer】Python代码获取的Token出现'Authentication_MissingOrMalformed'问题

    问题描述 Python 调用Azure AD中所注册的应用生成Token代码: import requests, json client_id = 'yourclientid' client_secr ...

  4. 树莓派修改根文件系统为f2fs

    目录 前言 操作简述 我的实际操作步骤 1. 准备 2. 查看树莓派分区信息 3. 备份根分区 4. 格式化树莓派TF卡根分区为f2fs文件系统 5.恢复备份 前言 在TF卡.固态硬盘之类的nand存 ...

  5. 在本地搭建 SVN 教程

    SVN 使用教程 以下内容参考自:SVN使用详细教程_大梦谁先觉i的博客-CSDN博客_svn使用教程 一.SVN 安装 1.1 软件下载 服务器:Downloads | VisualSVN 客户端: ...

  6. WOX 和 everything 差不多,挺不错也

    WOX 和 everything 差不多,挺不错也

  7. ARM的无线ble IP Cordio-B50 stack and profiles简析

    一 简介 人家英文写的很清楚,我就不蹩脚额翻译了. Cordio-B50 stack is designed specifically for Bluetooth low energy single- ...

  8. java生产者消费者模式代码示例

    package test; import java.util.LinkedList; public class Test { public static void main(String[] args ...

  9. Android 开发Day2

    我的是小刺猬版本,算是比较新的版本了,还有火烈鸟和蜻蜓版啥的 新建项目(project)点击加号新建就行了.这时我们会选择一个模板作为开发的辅助起点,看上哪个就选哪个就行了.推荐新手选空项目(Empt ...

  10. 记录一次WPF命令参数报错,InvalidCastException: T for DelegateCommand<T> is not an object nor Nullable.

    在使用WPF的时候对int或者bool类型进行绑定出现InvalidCastException: T for DelegateCommand is not an object nor Nullable ...