vue3+vite中配置路径别名@

在Vue 3 + Vite项目中配置路径别名@，你需要在项目根目录下的vite.config.js文件中使用resolve.alias配置选项。

以下是一个配置示例：

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      // 添加一个别名 "@", 指向 "src" 目录
      '@': path.resolve(__dirname, './src'),
    },
  },
});

在完成这个配置后，你可以在项目中使用@来代替src，例如：

// 在组件中导入文件时使用别名
import MyComponent from '@/components/MyComponent.vue';
 
// 在路由中使用别名
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    // 其他路由...
  ],
});

确保重启Vite开发服务器以使配置生效。