Webpack中识别Vue-Cli3配置的别名@

在使用webpack时,我们经常为了减少一些路径的输入会配置一个别名:@,如下:

import config from '@/config'

这是很常见的写法,同时webpack默认也是支持这种代码导航,按住 ctrl + 左键或者 command + 左键,但Vue-Cli3没有了webpack的默认配置改为了vue.config.js文件。这样webstorm就无法识别了,导航功能大打折扣。那有没有办法让webstorm重新找回神力?当然有。

第一步

首先在项目根目录新建文件:alias.config.js

/** * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名 * 本文件对项目无任何作用,仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可 * */const resolve = dir => require('path').join(__dirname, dir);
module.exports = {    resolve: {        alias: {            '@': resolve('src')        }    }};

上面这个文件,不会对项目产生任何影响,只是给webstorm用。

第二步

接下来,配置webstorm:

然后重启webstorm,原来的代码导航能力又有了!

还有,若有多个项目,则要为每个项目创建 alias.config.js (文件名可以随意)文件,同样也要多次配置webstorm。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2019-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券