关于VUE3的路径别名的配置（vite + webstorm）

​
在使用I-view提供的工程框架后，发现我的@路径在webstorm编辑器中无法被识别了，所以要记录下这次问题。

在项目中配置路径别名

1. 找到目标文件

如果你是vue2的项目，基于webpack进行打包构建的，那你需要在vue.config.js中进行配置，如果你是基于vite进行打包构建，那你需要找到vite.config.js文件配置

2.写入代码

先安装一下包，不安也可以继续走，如果报错了再回来下

npm i @types/node -D

引入下reslove模块

import { resolve } from 'path'

与plugins同级写入以下代码

resolve: {
      alias: {
      	'@': reslove(__dirname, './src')
      },
      extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
    }

extensions的作用就是在你去引入文件的时候，可以忽略掉的后缀，这个视情况来写

如果你的项目使用ts语言的，那么还需要额外的配置，找到你的ts.config.json,写入下面代码

{
   "compilerOptions": {
       "target": "esnext",
       "useDefineForClassFields": true,
       "module": "esnext",
       "moduleResolution": "node",
       "strict": true,
       "jsx": "preserve",
       "sourceMap": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "lib": ["esnext", "dom"],
       // 路径配置
       "baseUrl": ".",
       "paths": {
           "@/*": ["src/*"]
       }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]
}

其实配置到这里就结束了，如果你使用的vscode那么你无需其他的配置，但如果你用的是webstorm那么你会发现@符是可以使用的，但是没有路径提示出现，看下面的配置

3.针对webstorm进一步配置

首先你要进入到设置页面，ctrl + alt + s
依次找到语言和框架，JavaScript

配置哪个取决于你的项目构建工具，这里拿vite举例，点进去

按照图片，改为自动模式，同时将配置文件指向你当前项目的文件，webpack是vue.config.js, vite是vite.config.js，到这里就OK了！

4.关于脚手架的配置补充

可能有些人的项目是已经配置好后clone下来的，你会发现路径别名的配置变成了这样

接着会发现原本的webstorm的路径别名配置也无效了，不要慌。
这种写法其实是通过正则去匹配项目中用到了@符，将它统一替换为’.src/', 那这种情况只需要在你的项目中添加一个jsconfig.json文件, 如果你是ts的话，就是tsconfig.json,接着写入下面的代码

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

重新按照第三点的方法，将配置文件改为这个文件就ok了