vue3 vite中配置路径别名@

1、在项目中安装依赖包
安装@types/node 这个配置地址时会用到
npm install @types/node --save-dev

2、 修改vite.config.ts配置路径别名@

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from "path";//这个path用到了上面安装的@types/node

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //这里进行配置别名
  resolve: {
    alias: {
      '@': path.resolve('./src') // @代替src
    }
  }
})

3、修改tsconfig.json 中的信息
在compilerOptions字段中添加： “baseUrl”: “./”,“paths”: {“@/": ["src/”]}

"compilerOptions": {
	//几个常用配置
    "target": "ESNext",// 目标语言的版本
    "useDefineForClassFields": true,// 是否校验TypeScript数据类型
    "module": "ESNext",// 生成代码的模板标准
    "removeComments": true,	// 是否删除注释
    "outDir": "./dist", // 指定输出目录
    "alwaysStrict": true, // 在代码中注入'use strict'
    ......
	//添加如下信息
    "baseUrl": "./",	// 解析非相对模块的基地址，默认是当前目录
    "paths": {"@/*": ["src/*"]}	// 路径映射，相对于baseUrl
  },