WEBStorm IDEA Cannot support alias

[xgj1988]

WEBStorm IDEA Cannot support alias .
for example :
import PageHeader from '@/components/PageHeader';

默认别名@是src 目录，但是在webstorm 里面，我其实想用鼠标左键进入这个JS。但是进不去。。而且也没有自动路径提示。

[wangxingkang]

这个肯定点不进去啊

[sorrycc]

新建 webpack.config.js，内容如下：

module.exports = {
  resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src'),
    },
  },
};

[xgj1988]

@sorrycc 3Q

[smithyj]

@sorrycc @xgj1988 为什么我还是不行

[xgj1988]

@smithyj 我现在也不行了，。

[smithyj]

@xgj1988 ts 的话得配置下 paths

[xgj1988]

@smithyj 你的可以了吗？？你说的ts 是typescript 吗？

[smithyj]

可以 但是 css 与 img 引入还是存在问题

[xgj1988]

@smithyj 你是怎么做的呢？

[ylzon]

需要配置webstorm下的preference -> language & frameworks -> javascript -> webpack 路径到更目录下的webpack.config.js

[wjttzd]

可以使用vue里的配置文件。路径如下：

项目路径\node_modules\@vue\cli-service\webpack.config.js

[xgj1988]

更新到新版本就可以了。。

[miaozilong]

@shx996 vscode自动加载插件 不需要

[ghost]

@miaozilong 我是说@路径都不能识别。自动加载插件是什么意思？书写的时候提示插件并且自动引入？这个功能webstorm也有，而且主动引入的路径是替换之后的@，反而vscode只能用相对路径来引入。不知道我是否理解你的意思？

[xblcity]

@shx996 老哥你解决了吗？我也是用的Path Intellisense 插件只能提示路径，但是VS Code识别不了，无法跳转

[xblcity]

@shx996 我的可以用了，需要在package.json同级文件夹新建jsconfig.json文件配置一下，然后重启vs code，链接

[kdyzm]

可以使用vue里的配置文件。路径如下：

项目路径\node_modules\@vue\cli-service\webpack.config.js

这是正解

[markyun]

想要设置 alias 后，就能在编辑器中 正确编译和点击跳转，其实只有两处需要配置：webpack.resolve 和 tsconfig.json 路径映射的关系。
其中 tsconfig.json 中的 paths 主要用于告诉 TypeScript 编译器如何解析模块导入的路径。
而 webpack.resolve.alias 则用于告诉 webpack 构建过程中如何解析模块导入的路径。这两者的分别配合，确保在开发过程中和构建过程中都能正确地解析模块导入的路径，从而实现代码编译和代码跳转的成功使用。