使用WebStorm支持vue-cli 3.0的Alias

最新推荐文章于 2024-06-26 17:57:29 发布

置顶雾月哥

最新推荐文章于 2024-06-26 17:57:29 发布

阅读量2.9k

点赞数 1

分类专栏： Webstrom 文章标签： WebStorm vue-cli vue cli vue cli 3.0 vue-cli 3.0

本文链接：https://blog.csdn.net/a1093439315/article/details/88756291

版权

Webstrom 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用WebStorm支持vue-cli 3.0的Alias

在之前的vue-cli版本中，我们使用webpack.config.js来配置alisa，例如把src的别名设置为@，使用webstorm ctrl+b快捷键可以直接引导到对应的文件，但是vue-cli 3.0的配置使用的是新的方法来配置别名导致webstorm不能识别，我查了一下发现大家都是用添加一个新的老式alisa配置文件来解决的，在这里我介绍下新的方式解决这个问题：
其实在vue-cli 3.0的文档中有说明，我们打开webstorm->setting->直接引用此目录就可以了：

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

这里projectRoot表示你项目的根目录，完事记得使用npm编译一下代码并重新打开webstorm哦，否则是不会出现效果的！
例如我的alisa在vue.config.js文件中的配置是这样:

module.exports = {
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('_v', resolve('src/views'))
            .set('_c', resolve('src/components'));
    }
};

使用的时候这样就可以了：