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

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

配置步骤：

1. 加载需要依赖

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16