让IDE识别webpack的别名alias的实现方法

许多项目脚手架默认就会把src目录添加一个@别名，项目中实际引入时，虽然可以精简路径，但也带来一个很麻烦的问题：
IDE无法识别这些别名，因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

偶然发现vscode的web项目里有一个jsconfig.json文件，如：

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  },
  "target": "ES6",
  "module": "commonjs",
  "allowSyntheticDefaultImports": true
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules"]
}

只要有这个文件，vscode就可以正常识别出别名了。

后来发现JetBrains家的IDE更简单，配置指定一下就行：

在项目设置的webpack标签页里，将配置文件指向<projectRoot>/node_modules/@vue/cli-service/webpack.config.js即可。

保存并重新打开项目以后，不只src，所有的别名比如utils等等都可以被正常识别。

其实这都已经写在vue-cli3的文档里了，只是原始表述不太直观，被我一直忽略了。

到此这篇关于让IDE识别webpack的别名alias的实现方法的文章就介绍到这了,更多相关ide webpack alias别名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）

    1.webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2.打开HBulider,打开目录,选择这个list,项目名称自己更改.(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容) 这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步) 更改前: 更改后:  3.在HB中打开这个dist,可以看到有一个manifest.json的

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • 让IDE识别webpack的别名alias的实现方法

    许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题: IDE无法识别这些别名,因此导致无法自动完成路径.无法识别引用资源的输出.出现不必要的告警等情况. 偶然发现vscode的web项目里有一个jsconfig.json文件,如: { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [&

  • 修改Android签名证书keystore的密码、别名alias以及别名密码

    Eclipse ADT的Custom debug keystore自定义调试证书的时候,Android应用开发接入各种SDK时会发现,有很多SDK是需要靠package name和keystore的指纹hash来识别的(百度地图SDK.又或是微信sdk.新浪微博的sdk),这样如果使用默认自动生成的debug keystore的话就会给开发调试工作带来一些麻烦.因为在生成这些开放平台需要带签名的apk生成的签名信息,再去申请到最后的秘钥.这时可以通过修改正式的release keystore,生

  • Java别名Alias是如何工作的

    目录 前言 Alias在Java中是如何工作的? 结论 前言 在Java中,当引用(不止一个)链接到同一个对象时,使用Alias(别名).别名的问题是,当用户写入特定对象时,其他几个引用的所有者不希望该对象发生更改.在这里,包含别名的代码可能会很快变得有点混乱,而且调试起来也非常繁琐.总的来说,别名是一个应该避免或谨慎使用的过程.让我们看看Java Alias是如何工作的. Alias在Java中是如何工作的? 如前所述,当多个引用链接到同一对象时,会使用别名.这还意味着一个位置有几个别名可以修

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • JavaScript识别网页关键字并进行描红的方法

    JavaScript识别网页关键字并进行描红的方法

    本文实例讲述了JavaScript识别网页关键字并进行描红的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript智能识别网页关键字并加红显示出来,相信这个效果大家不陌生吧,用JS加红关键字要比程序控制输出好得多,必竟将一部分功能交给了客户浏览器,相应减轻了服务器的压力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/ 具体代码如下: <!DOCTYPE html P

  • vue-cli+webpack项目 修改项目名称的方法

    使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. 解决方法: 1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name) 2 重新安装依赖 cnpm install 3 启动项目 cnpm run dev ok,解决 以上这篇vue-cli+webpack项目 修改项目名称的方法就是小编分

  • webpack分离css单独打包的方法

    webpack分离css单独打包的方法

    本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点. 2018-02-01 14:45:23 由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 2016-05-17 11:55 刚学习web

  • android 识别U盘以及读写文件的方法

    android中读写文件的需求地方很多,其中就包括了识别U盘,弹出U盘,读写U盘的文件等. 那么,如何实现这些需求呢?笔者简单的说下: 1.识别U盘: 识别U盘的方法只要是用到了2个android官方类. 它们分别为:ContentResolver和AsyncQueryHandler.表现为前者提供内容给后者读取. 作法如下: 1)获取状态并遍历 contentObserver = new ContentObserver(mHandler) { @Override public void onC

  • python3+opencv3识别图片中的物体并截取的方法

    如下所示: 运行环境:python3.6.4 opencv3.4.0 # -*- coding:utf-8 -*- """ Note: 使用Python和OpenCV检测图像中的物体并将物体裁剪下来 """ import cv2 import numpy as np # step1:加载图片,转成灰度图 image = cv2.imread("353.jpg") gray = cv2.cvtColor(image, cv2.C

  • webpack下实现动态引入文件方法

    刚开始使用webpack时,可能很多人都会有过这样的想法,在require文件时,能不能不写静态的字符串路径,而是使用一个更灵活的方式,比如定义一个变量,根据具体的运行情况来确定需要require哪个文件! 比如,笔者就遇到了一个这样的需求. 当时是使用vue-router开发一个管理系统,管理系统自身有一个目录数组,而vue-router也需要一个route配置数组,而这两者恰恰是对应关系的.当时就想,能不能只维护一个目录数组,然后动态的生成route数组呢? 于是我实现了一个小demo,如下

随机推荐