相对路径别名配置，使用 @ 代替 src

一、安装@types/node

import path from 'path'时，vscode会出现波浪线，编译时会报错：TS2307: Cannot find module ‘path’ or its corresponding type declarations.

安装@types/node即可

pnpm i @types/node -D

二、更改vite.config.ts文件

1.写法一

import { join } from 'path'
function resolve(dir: string):string {
  return join(__dirname, dir)  //可以用process.cwd() path.join()和path.resolve()
}

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('/src'),
      '#': resolve('/types'),
    }
  }
})

2.写法二

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.写法三

import path from "path"
const pathSrc = path.resolve(__dirname, "src")

export default ({ mode }: ConfigEnv): UserConfig => {
    const env = loadEnv(mode, process.cwd())
    return {
        resolve: {
            alias: {
                "@": pathSrc
            },
        },
        server: {}
        plugins: []
    }
}

三、修改tsconfig.json或tsconfig.app.json

因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响，默认是当前目录，也可以写成"./"
    "paths": { // 路径映射，相对于baseUrl
      "@/*": ["src/*"],
      "#/*": ["types/*"],
    },
    "allowSyntheticDefaultImports": true // 允许默认导入
  }
}

重启vscode生效