vue中webpack默认配置_Webpack中识别Vue-Cli3配置的别名@

最新推荐文章于 2023-01-11 11:54:22 发布

giants_planet

最新推荐文章于 2023-01-11 11:54:22 发布

阅读量275

点赞数

文章标签： vue中webpack默认配置

本文链接：https://blog.csdn.net/weixin_34626306/article/details/112946638

版权

本文介绍了如何解决在VueCLI3项目中，由于缺少webpack配置导致WebStorm无法识别别名路径的问题。通过创建一个名为alias.config.js的文件，并在其中配置别名，然后在WebStorm的设置中指定该文件，可以恢复代码导航功能。只需简单两步，即可让WebStorm重新支持@别名的代码跳转。

摘要由CSDN通过智能技术生成

在使用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用。

Vue.js实战

作者：梁灏当当

第二步

接下来，配置webstorm:

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

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