感谢 评论大佬提示vue
webstorm webpack 直接引入文件
项目目录\node_modules\@vue\cli-service\webpack.config.js
便可。node
抄袭链接webpack
咱们使用 Webpack 常常会配置一些别名 alias
指向特定的目录,这样在使用 import
等语句时就不用写一大堆的相对路径了,常见的是将项目的 src
设置为 @
,好比某文件的路径是 src/libs/util.js
,配置后,任何地方就能够这样导入:web
import util from '@/libs/util.js';
复制代码
固然,这是很基础的 Webpack 配置,但本文介绍的是 IDE WebStorm
可以经过 Ctrl + 点击左键
直接进入别名的某个目录下。WebStorm 默认是可以解析 webpack 配置文件的,也就是说你配置了 webpack 别名 alias 后,天生就支持这种快速跳转文件。iview
可是 Vue CLI 3
里,是没有传统的 webpack 配置文件的,由于使用另外一种写法集成到了 vue.config.js
里。webstorm
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义,好比.set('@@', resolve('src/good-analysis-total-components'))
.set('_c', resolve('src/components'))
}
}
复制代码
这时 WebStorm 就没法识别了,以致于上例导入进来的 util 在上下文里都没法被 WebStorm 解析到,那使用 WebStorm 的意义就大打折扣了。 这时,咱们只须要在项目根目录建立一个文件 alias.config.js
:ui
/** * 因为 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 的配置里,将它选为 webpack 配置文件就大功告成了:spa
并且,设置仅对当前项目有效,并不会影响到其它项目。code