[Vue 配置] Vite + Vue3 项目配置 src目录别名为 @

文章归档：https://www.yuque.com/u27599042/coding_star/ogu2bhefy1fvahfv

安装 @types/node

安装 @types/node 依赖，使得项目在开发环境下具有 path 模块（前端项目中默认无 path 模块）

pnpm i -D @types/node
1

配置 src 目录别名

在 vite.config.js 文件中，编写如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// src 目录的绝对路径
const pathSrc = path.resolve(__dirname, './src')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置别名
    alias: {
      // 配置 src 目录的别名为 @
      "@": pathSrc, 
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18