解决vite+vue中别名问题

创建vite+vue项目

npm create vite@latest

配置别名

在vite.config.js中配置别名

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

此时的@别名指向的是src目录

解决vscode仍然无法识别别名问题

这个问题作者也找了很久，根据网上提示说:

这个问题可能是因为VS Code的JavaScript/TypeScript语言服务没有识别到你设置的路径别名

解决方法
在你的项目根目录下添加jsconfig.json或tsconfig.json文件（取决于你是用JavaScript还是TypeScript），然后设置路径别名。例如，如果你想要设置@为src目录的别名，可以按照以下方式设置：

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