在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias

2020-09-02 20:00:24 阅读：312 来源： 互联网

标签：Vue CLI WebStorm 别名 js util alias webpack

我们使用 Webpack 经常会配置一些别名 alias 指向特定的目录，这样在使用 import 等语句时就不用写一大堆的相对路径了，常见的是将项目的 src 设置为 @，比如某文件的路径是 src/libs/util.js，配置后，任何地方就可以这样导入：

import util from '@/libs/util.js';

当然，这是很基础的 Webpack 配置，但本文介绍的是 IDE WebStorm 能够通过 Command + 点击左键直接进入别名的某个目录下。WebStorm 默认是能够解析 webpack 配置文件的，也就是说你配置了 webpack 别名 alias 后，天生就支持这种快速跳转文件。

但是 Vue CLI 3 里，是没有传统的 webpack 配置文件的，因为使用另一种写法集成到了 vue.config.js 里，这时 WebStorm 就无法识别了，以至于上例导入进来的 util 在上下文里都无法被 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')
        }
    }
};

如果以上不生效，可以把wepack configuration file配置成类似d:\project-name\node_modules\_@vue_cli-service@3.12.1@@vue\cli-service\webpack.config.js的形式

而且，设置仅对当前项目有效，并不会影响到其它项目。
快去试试吧！

另附：webstorm如何避免node_modules影响性能的手段之一：

转自：https://www.jianshu.com/p/05ee1edd6f9c

标签：Vue,CLI,WebStorm,别名,js,util,alias,webpack
来源： https://www.cnblogs.com/zhishaofei/p/13603773.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias