vite设置@路径别名

vite项目想通过 import { userStore } from "@/store/user" 这种方式引用，需要配置路径别名

路径别名的配置需要两个步

1.在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve:{
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
      },
  }
})

该方法告诉vite，@设置的路径对应哪个目录下

如果引用path报错，那么就执行

npm install @types/node --save-dev

2.在tsconfig.json或者jsconfig.json中配置

{
  "compilerOptions": {
    "baseUrl": ".", // 用于相对模块名的基目录，指定解析非相对模块名的基准目录
    "paths": {
      "@/*": ["src/*"]   // 模块名到基于 'baseUrl' 的路径映射的列表，例如：{ "module": ["path/to/module"] 
    },
}

该配置用于告诉编译器，@指向的位置，否则会编译器会报错，配置完成后需要重启编译器看到效果