使用WebStorm支持vue-cli 3.0的Alias

版权声明：本文为博主原创文章，转载和引用请说明出处。 https://blog.csdn.net/a1093439315/article/details/88756291

使用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'));     } };  

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

import routes from '@/config/routes';  

vue-cli官方文档参见：https://cli.vuejs.org/zh/guide/webpack.html#审查项目的-webpack-配置

文章来源: https://blog.csdn.net/a1093439315/article/details/88756291