【Vue3项目实战系列一】—— vite.config.js配置文件详细说明

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。
👉 关于【Vue3项目实战系列】专栏，本专栏旨在帮助新人粉丝全面快速的掌握vue3开发技术，在接下来的日子里我带着大家从零开始一个vue3项目，项目包含了框架搭建，用户登录，用户权限，表格增删改查，表单验证，等一套完整的用户管理系统的实践开发，学完可以帮助前端新人至少拥有一年工作经验，本专栏完全免费，欢迎关注并订阅！🎈
🎯如果你有任何困惑或疑问欢迎评论区给我留言哦，我收到后会第一时间为你答疑解惑😉

引言

vite.config.js 是 Vite 构建工具的配置文件，用于定义项目构建时的各种选项。

项目文件解读

import {
    fileURLToPath, URL } from 'node:url'
import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
   
  plugins: [
    vue(), // Vue 模板支持
    vueJsx(), // Vue JSX 支持
    vueDevTools(), // 开发者工具集成
  ],
  resolve: {
   
    alias: {
   
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }, // 路径别名设置，方便模块导入
  },
})