vue.js - vscode不识别@，vue项目@不能点击跳转 的问题？

Question

vscode不识别@，vue项目@不能点击跳转 的问题

在这个项目 https://github.com/yangzongzhuan/RuoYi-Vue3
main.js文件中有两行代码

import SvgIcon from '@/components/SvgIcon'  //代码 22 行import elementIcons from '@/components/SvgIcon/svgicon' // 代码 23 行

分别对应 SvgIcon目录下的index.vue 和svgicon.js文件

我想实现 ctrl+鼠标左键点击 22行 可以跳转打开 SvgIcon组件

我想实现 ctrl+鼠标左键点击 23行 可以跳转打开 svgicon.js 文件如何实现？

有一种方案可以实现 点击23行 打开svgicon.js

https://www.cnblogs.com/leslie1943/p/13493829.html

f

Answer 1

要实现在 VS Code 中通过 ctrl+鼠标左键点击 打开特定的文件，你需要确保你的项目配置正确，且 VS Code 能够识别并解析这些路径。

对于 Vue 项目，特别是像 '@/components/SvgIcon' 这样的路径，它们通常是 Webpack 或 Vue CLI 配置中的别名（alias）。在 Vue CLI 生成的项目中，@ 符号通常被配置为指向 src 目录。

要解决这个问题，请尝试以下步骤：

1. 确认 Webpack 配置：确保你的项目中 Webpack 的配置文件中（如 vue.config.js 或 webpack.config.js）有正确的别名设置。对于 Vue CLI 项目，这通常在内部配置中完成，但你可以检查或修改它。
2. VS Code 设置：VS Code 本身可能需要一些设置来识别这些路径。确保你安装了适用于 Vue 的 VS Code 扩展（如 Vetur）。这些扩展通常能增强对 Vue 文件和路径的支持。
3. 文件链接：如果你想要在代码中直接添加可点击的文件链接，你可以使用 HTML 的 <a> 标签，但这在 JavaScript 或 Vue 文件中可能不太适用。更常见的做法是使用集成开发环境（IDE）或代码编辑器的功能。
4. 使用第三方插件：有些 VS Code 插件可能提供了路径跳转的功能。你可以搜索和安装这样的插件，看看它们是否满足你的需求。
5. 路径正确性：确保你的导入路径是正确的。在你的例子中，@/components/SvgIcon 和 @/components/SvgIcon/svgicon 应该是正确的路径，但确保这些文件实际上存在于你的项目中。

如果以上步骤都不奏效，可能需要更深入地检查你的项目配置和 VS Code 的设置。有时候，这类问题可能涉及多个因素，包括项目结构、构建工具配置和代码编辑器设置。