插件

1. 首先需要安装npm install eslint-import-resolver-alias插件
2. 接着在.eslintrc.js中配置，否则eslint会解析失败

module.exports = {
	settings: {
   		"import/resolver":{
       		"alias": {
              "map": [["@", "./src"]] ,
              "extenstions": ['.js','.ts','.jsx','.json']
   						
           } 
       } 
   }
}

vite配置别名

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      "/@": path.resolve(__dirname, "./src")
    }
  }
})

vscode别名智能提示

有两种方式使得vscode有智能提示

安装path-alias插件

在vscode中安装该插件，并在setting.json中配置路径别名

“pathAlias.aliasMap”: {
    // key别名 | 应用${cwd}来代替当前工作目录的绝对路径
    “@”: “${cwd}/src”,
    “~”: “${cwd}/src”,
    “components”: “${cwd}/src/components”
},

配置jsconfig.json

在根目录中创建该文件

{
  "compilerOptions": {
  "target": "ES6"
  "experimentalDecorators": true,
  "baseUrl": "./",
  "paths": {
    "@/": ["src/"],
   }
  },
  "exclude": ["node_modules", "dist"]
}