WebStorm 中 VUE 设置 alias.config.js 别名后,点击 @/utils/request @/router/ 时不能跳转到指定文件

刚开始学习 VUE 时遇到的问题,一直没有整理,所以这一次补上。

环境:
WebStorm2020.1.2 ,额,一直用的是旧版本的,不敢升级(你懂得),所以不知道新版本是不是不用配置也可以用。

2021-11-11 更新:
实测在 vue2.xvue3.x 环境中这种方法都可用,昨天晚上刚开始尝试 vue 3,香不香目前还没感受到,但是 Vite 感觉还是很强大的,后续深入研究一波。

1. 配置 alias.config.js

根据添加 alias.config.js 文件,并包含下面的内容:

const resolve = dir => require('path').join(__dirname, dir)

module.exports = {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

这样在 vue 文件、JS 文件中就可以按照下面的以类似于相对路径的方式引用其他文件:
VUE 文件

<template>
	...
</template>
<script>
import WxTools from "@/utils/wxtools";
import Wexin from "@/api/weixin";
</script>

JS 文件

import axios from 'axios'

// 如果是 src/router/index.js 可以省略后面的 /index.js
import router from '@/router'

import {Toast, Dialog} from 'vant';

// src/utils/basetools.js 可以省略后缀
import BaseTools from "@/utils/basetools";

用的时候有可能并没有任何问题,但是就是在开发的过程中不能够点击跳转到相应的文件,很影响开发的效率呀。

2. 解决点击跳转的问题

打开配置文件,并搜索 webpack

添加 alias.config.js 文件(选择当前项目中的):

保存即可!

接下来就请高效的的撸代码吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注