vite打包工具使用

Derivefly

已于 2025-07-12 15:09:35 修改

阅读量353

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 vite 打包工具

于 2025-07-12 10:40:56 首次发布

本文链接：https://blog.youkuaiyun.com/Derivefly/article/details/149290246

1、vite的基本概念

Vite是一个现代化的前端构建工具。。它利用原生ES模块（ESM）和浏览器内置模块系统，提供极速的开发服务器启动和热更新。Vite支持Vue、React、Preact、Lit等框架，同时具备Rollup的打包能力。

2、安装与初始化

确保本地已安装Node.js（版本≥12.0.0）。通过以下命令创建Vite项目：

npm create vite@latest

根据提示选择项目名称、框架（如Vue、React）和语言（JavaScript/TypeScript）。完成后进入项目目录并安装依赖：

cd your-project-name
npm install

3、开发模式运行

启动开发服务器：

npm run dev

Vite会启动一个本地服务器，默认端口为5173。修改代码后，浏览器会立即热更新，无需手动刷新。

4、项目结构说明

典型Vite项目包含以下核心文件：

vite.config.js：配置文件，可自定义构建选项
index.html：入口HTML文件（位于根目录）
src/：源码目录，包含主逻辑和组件
public/：静态资源目录

5、生产环境打包

生成优化后的静态文件：

npm run build

打包后的文件默认输出到dist/目录。可通过配置修改输出路径和格式。

6、配置自定义

在vite.config.js中调整构建行为。例如修改端口或别名：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

7、常用插件扩展

通过插件扩展功能：

安装官方插件（如Vue支持）：

npm install @vitejs/plugin-vue

配置插件：

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

8、环境变量管理

使用.env文件管理环境变量：

创建.env.development和.env.production
变量需以VITE_前缀开头：

VITE_API_URL=https://api.example.com

在代码中通过import.meta.env.VITE_API_URL访问

9、性能优化技巧

代码分割：Vite自动处理动态导入
预构建依赖：通过optimizeDeps配置加速启动
静态资源处理：小文件自动内联，大文件哈希命名

10、与传统工具对比

启动速度：Vite冷启动时间通常在毫秒级
热更新：基于ESM的按需编译
打包：生产环境使用Rollup，输出高度优化的代码

vite官方文档：

官网地址: Vite | Next Generation Frontend Tooling