webstorm+vite设置别名 @【有效】

no_houttuynia

已于 2023-04-13 13:10:03 修改

阅读量383

点赞数 2

分类专栏： #文本编辑器文章标签： webstorm javascript vue.js

于 2023-04-13 13:08:40 首次发布

本文链接：https://blog.csdn.net/qq_43071951/article/details/130128008

版权

#文本编辑器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在WebStorm中结合Vite设置TypeScript的别名。通过修改tsconfig.json文件，设置baseUrl为.,并配置paths对象，将@/*映射到./src/*，以实现项目中的模块路径简化。该方法已在使用Vite4.2.0和Vue3.2.47的环境中验证有效。

摘要由CSDN通过智能技术生成

webstorm+vite设置别名 @【亲测有效】

修改tsconfig.json

{
	"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    ......
}

运行环境

"vite": "^4.2.0",
"vue": "^3.2.47",
node 18.15.0

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

no_houttuynia

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webstorm+vite设置别名 @【有效】

webstrom+vite设置@别名，提示
复制链接

扫一扫

专栏目录

webstorm+vue初始化项目的方法

10-17

WebStorm与Vue项目初始化方法是一套详细的操作指南，对于前端开发者来说，在使用WebStorm这款集成开发环境（IDE）中集成Vue.js框架进行项目开发时，掌握初始化流程是十分必要的。初始化项目的步骤不仅包括必要的开发...

vite webstorm alias @

蒋亮亮的博客

11-17

2753

vite webstorm 识别路径别名@ // webstorme 识别 // 在tsconfig.json complierOptions 下添加 "baseUrl": ".", "paths": { "@/*": ["./src/*"] } // vite 识别 // 在vite.config.js 添加， resolve: { // https://vitejs.dev/config/#resolve-alias alias: { "@": "/src",

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

关于VUE3的路径别名的配置（vite + webstorm）

k1_maple的博客

05-10

2516

在使用I-view提供的工程框架后，发现我的@路径在webstorm编辑器中无法被识别了，所以要记录下这次问题。

关于Vite+Vue+Ts WebStorm路径别名的问题

最新发布

Odyssey_kd的博客

06-26

354

最后文章写到这我发现，好像只用配置下面这么多就不报错了，如果还是报错就把node_modules删除重新 npm i 试试。

webstorm无法识别@问题解决

weixin_44269248的博客

02-01

4187

在webstorm中无法识别@符号,无法ctrl跳转,需要进行如下配置:

Webstorm无法识别Vite构建的工程的@别名符号解决方案——偷梁换柱骚操作。

weixin_45254062的博客

01-01

1742

问题简述在 2022.1 版本 Webstorm IDE 里面，创建好一个 Vite 工程之后，IDE 会提示 Cannot resolve xxx。意思就是说无法解析 @ 符号表示的路径。问题分析可能是版本比较老旧的原因，新版的 2023 就没有这个问题，因为它自身集成了 Vite 官方的语法插件。旧版的只是自己手动下载了一个第三方的 Vite Integrated 插件，可能语...

webstorm使用配置技巧（Vue版）

u012574599的博客

03-01

5189

webstorm配置使用技巧（vue版）

Vite 的基本应用

上庸者-不服周

06-08

730

下一代前端构建工具----vite

webstorm重命名文件

weixin_42371145的博客

09-24

2160

选中文件-----refactor-----rename-----修改文件名字-----下面红框几个选项的意思是寻找引用到文件名的地方，一块帮你改了，勾选上-----点 refactor-----出现下面 do refactor图片，列出引用到的地方，点do refactor ...

pyCharm、webStorm主题+设置

07-23

做为一个程序员，一款漂亮的编译器可以使你的代码赏心悦目注：引入默认可能是mac的快捷键需要改成windows或者对应自己顺手的快捷键

webstorm+登录注册+聊天大厅+点对点视频聊天+界面美化+源码

05-04

通过WebRtc搭建了自己的网站，实现了如下功能： ...>2、聊天大厅设计 >3、点对点视频聊天 >4、界面美化注意：cert文件夹下需要放自己的ssl证书（ssl证书获取自己百度），并改名为ssl_server，两个文件都需要这样命名，...

【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5，入门教程-附件资源

03-02

【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5，入门教程-附件资源

webstorm识别vite别名路径方法

unstorm的博客

05-18

2190

很多时候我们会遇到webstorm里面import的文件路径显示下划线无法快捷查看详情的情况。解决办法：在项目根目录下的tsconfig.json，或者jsconfig.json添加如下代码，没有这两个文件就新建一个，添加完成后等待编辑器自动识别即可。 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } } ...

Vue项目别名@不被WebStorm识别问题

wzp6010625的博客

12-15

3416

1. 问题 vue项目中，使用别名@作为路径前缀时，编辑器会显示波浪线，并且Ctrl + 鼠标左键时找不到对应文件，十分难受。 2. 解决打开WebStorm的设置依次找到 Languages & Frameworks -> JavaScript -> Webpack，将Disabled改为Automatically 选择这个后，webstorm会自动解析webpack配置，所以就支持别名@的写法了。 ...

解决webstorm不能识别vue的@路径引用

学习使我快乐_玉祥

03-06

2577

vue3版本： vue.config.js文件中加入如下内容： module.exports = { resolve: { alias: { "@": require("path").resolve(__dirname, "src") } } }; 在webstorm的设置中找到Webpack设置，选第三个，选中vue.config.js文件，重启后就会生效。 ...

Webstorm——Vue项目无法识别@

qq812457115的博客

04-26

1839

1. ctrl+alt+s[进入设置页面] language & frameworks -> javascript -> webpack 选择Manually,然后选择Configuration File 路径当前目录：node_modules@vue\cli-service\webpack.config.js

idea webstorm识别vite别名路径方法

执着的博客

07-22

5672

在项目根目录下的tsconfig.js,或者jsconfig.js添加如下代码，没有这两个文件就新建一个 //===========编译器ide提示。。。。 "baseUrl": "./", "paths": { "/@/*": ["./src/*"] }, //===========编译器ide提示。。。。 ...

让webstorm 识别vue cli3项目中的@路径别名正确解析的配置方法