vue3+ vite配置@路径

在 Vue 3 和 Vite 项目中，你可以通过配置 vite.config.js 文件来设置 @ 作为路径别名（Alias），用于引用 src 目录中的文件。这样可以简化导入路径，让代码更简洁和可维护。

配置步骤：

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. 使用 @ 别名

现在你可以在项目中的任何地方使用 @ 来引用 src 目录下的文件。比如，如果你有一个组件位于 src/components/MyComponent.vue，你可以像这样导入：

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 目录
    },
  },
});

这样配置完成后，@ 就会指向 src 目录，使得路径引用更加方便和简洁。