vite-vue3-ts 搭建项目时 项目中使用 @ 指代 src

目前在 Vue 项目中比较通用的做法是：使用 @ 表示 src 目录，引入时就可以使用 @/views/home/index.vue，不管引入文件在任何地方，都可以使用这个路径进行引入。但是这个用法并不被默认支持，需要通过一番配置才可以正常使用。

配置步骤：

1. 加载需要依赖

yarn add path
yarn add @types/node // 不加这个 __dirname 会报异常

2. vite.config.ts 中配置

import {
          
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import {
          
    resolve } from "path"; // 引入方法


// https://vitejs.dev/config/
export default defineConfig({
          
   
  plugins: [vue()],
  resolve: {
          
   
    alias: [ // 配置 @ 指代 src
      {
          
   
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
  },
  server: {
          
   
    port: 9527,
  },
});

4. 使用 router/index.ts

// index.ts
import {
          
    createRouter, createWebHistory, RouteRecordRaw } from vue-router;
const routes: Array<RouteRecordRaw> = [
    {
          
   
        path: /,
        name: Home,
        component: () => import(@/views/home/index.vue),
    }
];

const router = createRouter({
          
   
    history: createWebHistory(),
    routes,
});

export default router;