vue3+ vite配置@路径

配置步骤：

1. 安装相关依赖（如未安装）

如果你还没有安装 @vitejs/plugin-vue，可以先安装它，因为这是 Vite 支持 Vue 3 所必需的插件：

npm install @vitejs/plugin-vue

2. 配置 vite.config.js

在 vite.config.js 文件中，配置路径别名。在 Vite 中，别名配置通过 resolve.alias 来实现。

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'), // 配置 @ 指向 src 目录
    },
  },
});

3. 使用 @ 别名

import MyComponent from '@/components/MyComponent.vue';

4. IDE 设置（可选）

为了让你的 IDE 能正确识别 @ 别名，可以在 jsconfig.json 或 tsconfig.json 中添加如下配置：

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

5. 完整示例

以下是一个完整的 vite.config.js 配置示例：

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'), // 使用 @ 指向 src 目录
    },
  },
});