配置webstorm识别@符号(路径别名)

Daming 2020-05-03
0条评论 179 次浏览
Daming 2020-05-030条评论 179 次浏览

习惯于使用webstorm做开发,在使用vue 或 react脚手架过程中发现 使用@符号 import 组件或者资源 webstorm 会用波浪线进行标识,并提示无法识别路径,我们也无法直接点击路径去追踪资源,虽然对项目的运行没有影响,但对于有代码洁癖的我还是忍不了,而且无法通过点击去追踪资源 也使得开发不便。

解决方案:
1.在项目根目录创建任意名称的js 文件:
webstorm.webpack.config.js

'use strict'
const path = require('path')

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': path.resolve('src'),
            '@/com': path.resolve('src/components'),
            // 根据项目所需 可以在这里定义任意个别名
        }
    }
}

2.webstorm 进入 Settings -> languages & Frameworks -> Javascript -> webpack
可以看到 webpack configuration file,将这里的文件路径指向 前面创建的js文件就可以了。

1+

发表评论

电子邮件地址不会被公开。