webstorm 在Vue项目下不识别@路径问题

最新推荐文章于 2025-08-30 21:00:49 发布
原创 最新推荐文章于 2025-08-30 21:00:49 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #webstorm

解决方案：

在WebStorm中的WebPack添加当前项目模块中的webpack.config.js，具体如下图所示：

webstorm 不能识别vue-cil @路径的问题
小游
12-20 1819
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 新建一个webpack.config.js然后加入下面的内容 module.exports = { resolve: { alias: { "@": require("path").resolve(__dirname, "src") // change this to your folder path } } }; 然后我们到webstorm里面自己手动指定这个.
关于Vite+Vue+Ts WebStorm路径别名的问题
Odyssey_kd的博客
06-26 832
最后文章写到这我发现，好像只用配置下面这么多就不报错了，如果还是报错就把node_modules删除重新 npm i 试试。
webstorm无法识别@问题解决
weixin_44269248的博客
02-01 4904
在webstorm中无法识别@符号,无法ctrl跳转,需要进行如下配置:
WebStorm无法识别@下的文件，但是可以正常使用
最新发布
zxb的博客
08-30 264
本文记录了Vue项目配置路径别名时遇到的TypeScript报错及解决方法。问题表现为使用@/路径导入组件时TS报错"找不到模块"。关键解决步骤是在tsconfig.json中添加"include": ["src/**/*"]配置项，确保TypeScript能够正确解析src目录下的文件。相关配置涉及routes.ts、vite.config.ts和tsconfig.json文件的路径别名设置，最终通过明确包含src目录解决了模块解析问题。
webstorm问题解决：无法识别 @
喜大普奔
07-11 1288
添加 baseUrl 和 paths 的配置，以告诉 TypeScript 和 WebStorm 如何解析路径别名。但是，我用webstorm 上识别不了。
Webstorm——Vue项目 无法识别@
qq812457115的博客
04-26 2083
1. ctrl+alt+s[进入设置页面] language & frameworks -> javascript -> webpack 选择Manually,然后选择Configuration File 路径当前目录：node_modules@vue\cli-service\webpack.config.js
Vue 项目中 “@” 别名无法识别？解决方案全解析
m0_57836225的博客
04-02 1166
在 Vue 项目中解决 “@” 别名无法识别的问题，需从构建工具配置、TypeScript 配置、开发服务器和 IDE 等多个方面排查。通过正确配置 vite.config.ts 或 vue.config.js 文件，以及 tsconfig.json 文件，并确保开发服务器和 IDE 正常工作，就能顺利使用 “@” 别名，提升 Vue 项目开发效率。在实际开发中，遇到问题时要系统分析，逐步排查。同时，保持项目配置文件的规范和整洁，以便后续维护和扩展。
webstorm 不识别Vue旧项目的路径别名 @
雷德·佛斯号
02-20 615
webstorm 识别 Vue旧项目的 @ 路径别名
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
然而，在使用IntelliJ IDEA或WebStorm这样的IDE时，有时可能会遇到Vue CLI脚手架项目无法识别Webpack别名的问题，这会给开发带来不便。本文将详细介绍如何解决这个问题。 首先，Webpack别名是Webpack配置中的一个...
【JavaScript源代码】基于vue项目设置resolves.alias '@'路径并适配webstorm.docx
12-29
通过以上内容的学习，相信你已经掌握了如何在基于Vue.js的项目中配置路径别名以及如何在WebStorm中有效利用这些设置。此外，还提供了一些额外的知识点，帮助你更深入地理解Vue.js项目开发的相关技术栈。
webstorm2019版本创建VUE项目
01-20
在本文中，我们将深入探讨如何在WebStorm 2019版本中创建Vue.js项目，以及遇到问题时的解决策略。Vue.js是一个流行的前端框架，而WebStorm是一款强大的JavaScript IDE，支持多种Web开发技术，包括Vue.js。然而，有时...
解决WebStorm无法正确识别Vue3组合式API的问题
氷泠
02-17 9306
1 问题描述 Vue3的组合式API无法在WebStorm中正确识别，表现为defineComponent等无法被识别： 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库，笔者相信WebStorm是可以做到的，只是某些配置没有正确，笔者尝试过在设置的Libraries中勾选上node_modules，但是没有效果。 3 解决办法 最终的解决办法参考了此处（图源）： 选择node_modules文件夹，右键选择Mark Directory as，最后选择Not Excluded即可。 之后
解决WebStorm中Unibest项目Vue标签报错问题
gitblog_01402的博客
08-19 682
解决WebStorm中Unibest项目Vue标签报错问题 【免费下载链接】unibest unibest - 最好用的 uniapp 开发框架。unibest 是由 uniapp + Vue3 + Ts + Vite5 + UnoCss + WotUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、...
解决WebStorm识别不到“@”符号路径问题
qq_43731674的博客
07-01 3717
步骤一 在项目根目录新建文件夹（webstorm.config.js）并加入以下内容 'use strict' const webpackConfig = require('@vue/cli-service/webpack.config.js') module.exports = webpackConfig 如果以上方法不生效可以尝试步骤二 步骤二 在项目根目录新建文件夹（jsconfig.json）并加入以下内容 { "compilerOptions": { "target": "es6
关于vue组件开发过程中一直报错路径找不到的问题This relative module was not found:.
weixin_45128003的博客
12-28 2104
如图 …/src/assets/logo.png 这个路径就是找不到图片 但是在 但是在login 这个路径就可以找到 属实奇葩 不论怎么 配置都不对 解决办法把路径 …/src/assets/logo.png 改为 /src/assets/logo.png 这样就可以了 很不理解 都是一个图片 路径 还同一个不好使 难不成是因为文件位置不一样 所以查询的路径方式也不一样 ...
解决WebStorm 2021无法识别@(别名路径)的问题
weixin_44944744的博客
12-08 9528
首先第一步 先去设置,语言和框架 ---> JavaScript --->webpack ,如果这个时候看到已禁用,把他调成自动 第二步 在根目录下创建webpack.config.js 文件，并配置以下代码 const path = require('path') module.exports = { context: path.resolve(__dirname, './'), resolve: { extensions: ['.js', '.vue', ...
让webstorm 识别vue cli3项目中的@路径别名正确解析的配置方法
热门推荐
weixin_43343144的博客
03-19 1万+
特别注意：如果在scss中使用@别名则需要加~号。比如在src目录下有一个var.scss文件，其他文件引用时则需写成： @import "~@/var.scss"; （scss中加了~@就不会报错了） 参考：https://www.cnblogs.com/axel10/p/10417579.html ...
解决webstorm不能识别vue的@路径引用
学习使我快乐_玉祥
03-06 2789
vue3版本： vue.config.js文件中加入如下内容： module.exports = { resolve: { alias: { "@": require("path").resolve(__dirname, "src") } } }; 在webstorm的设置中找到Webpack设置，选第三个，选中vue.config.js文件， 重启后就会生效。 ...
vscode 中vue导入模块的@路径提示以及采用@后报错显示not found
Hannah_Hannah_的博客
06-13 7530
上图点击【扩展设置】后进入下图点击上图的【步骤 2】之后，进入下图的 【settings.json】文件中，添加下列框出的代码、 以上是下载的插件的基本配置接下来是取别名的配置如果没有jsconfig.json文件，那就自己建一个（！！！名字要一摸一样） 以上情况就基本上成功了，如果@路径还不生效的话 ，看看自己的文件中是否使用了tsconfig.json文件， 如果有的话，需要在tsconfig.json中添加配置 "allowJs": true， 最后就成功啦！！！！！.........
webstorm编辑vue项目
08-20
### WebStorm 编辑 Vue 项目的配置方法 在 WebStorm 中编辑 Vue 项目需要进行一系列的配置，以确保开发环境能够正确识别和处理 Vue 文件的结构和语法。以下是详细的配置方法： #### 安装必要的插件 WebStorm 提供了对 Vue 的原生支持，但为了确保最佳的开发体验，建议安装 [Vue.js 插件](https://plugins.jetbrains.com/plugin/9423-vue-js)。该插件增强了对 Vue 文件的语法高亮、代码补全、错误检查等功能[^1]。 #### 创建或打开 Vue 项目 可以通过以下方式创建或打开一个 Vue 项目： - **新建项目**：在 WebStorm 的欢迎界面选择 "Create New Project"，然后选择 "Vue.js" 模板。WebStorm 会自动为你生成一个基础的 Vue 项目结构。 - **打开现有项目**：选择 "Open" 并导航到你的 Vue 项目目录，WebStorm 会自动识别并加载项目[^1]。 #### 配置项目结构 确保项目的结构符合 Vue CLI 的标准布局，通常包括 `src` 目录（存放源代码）、`public` 目录（存放静态资源）和 `package.json` 文件（项目依赖和脚本配置）。WebStorm 会自动识别这些目录并提供相应的支持。 #### 配置 JavaScript 和 Vue 文件的语法检查 在 WebStorm 中，可以通过以下步骤启用和配置语法检查工具： 1. 打开设置（Settings）界面（`File > Settings` 或 `Ctrl+Alt+S`）。 2. 导航到 `Languages & Frameworks > JavaScript > Code Quality Tools`。 3. 启用 ESLint 或其他你喜欢的代码检查工具，并配置相应的规则文件路径。 #### 配置运行和调试环境 为了在 WebStorm 中运行和调试 Vue 项目，可以配置运行配置： 1. 点击右上角的运行配置下拉菜单，选择 "Edit Configurations"。 2. 点击 "+" 按钮，选择 "npm"。 3. 在 "Package" 字段中选择你的项目目录，"Command" 字段选择 "run"，"Scripts" 字段选择 "serve"（默认的启动脚本）。 4. 应用更改并保存配置。现在可以通过 WebStorm 的运行和调试按钮启动和调试应用。 #### 使用内置终端 WebStorm 提供了一个内置终端，可以直接在 IDE 中运行命令。可以使用终端执行 `npm run serve` 或其他 Vue CLI 提供的命令来启动开发服务器或构建项目。 #### 配置代码片段和自动补全 WebStorm 支持自定义代码片段和自动补全功能，可以显著提高编码效率。通过 `Settings > Editor > Live Templates` 可以添加和管理自定义的代码片段，适用于 Vue 文件的模板、脚本和样式部分。 #### 集成版本控制 如果项目使用 Git 进行版本控制，可以在 WebStorm 中轻松集成： 1. 打开 `Settings > Version Control`。 2. 选择你的项目根目录，并配置 Git 路径。 3. WebStorm 会自动识别 Git 仓库，并提供提交、推送、拉取等操作的界面支持。 ### 示例代码 以下是一个简单的 Vue 组件示例，展示了如何在 WebStorm 中编写 Vue 文件： ```vue <template> <div id="app"> <h1>{{ message }}</h1> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { data() { return { message: 'Hello Vue!' }; }, methods: { changeMessage() { this.message = 'Message Changed!'; } } }; </script> <style scoped> h1 { color: #42b983; } </style> ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值