当前位置：首页 > news >正文

vite打包的简单配置

news 2025/7/8 11:06:15

vite打包的简单配置

Vite 是一个面向现代浏览器的新型前端构建工具，它利用浏览器原生的 ES 模块支持进行快速开发。相比传统的打包工具（如 Webpack），Vite 在开发模式下具有更快的冷启动速度和即时热更新能力。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 支持 Vue 3 单文件组件
import ElementPlus from 'unplugin-vue-components/vite'; // 自动按需引入 Element Plus 组件
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入常用 API
import Components from 'unplugin-vue-components/vite';export default defineConfig({plugins: [vue(), // 启用 Vue 插件AutoImport({ // 自动导入 Vue、Pinia 等常用 APIimports: ['vue', 'vue-router', 'pinia'],dts: true, // 生成 auto-imports.d.ts 类型声明文件}),Components({ // 自动注册 Vue 组件extensions: ['vue'], // 支持的组件类型dts: true, // 生成 components.d.ts 类型声明文件}),ElementPlus({ // 自动按需加载 Element Plus 组件useSource: true, // 使用源码版本以支持主题定制}),],server: {port: 80, // 开发服务器端口open: true, // 自动打开浏览器proxy: { // 配置代理解决跨域问题'/api': {target: 'http://localhost:8080', // 后端服务地址changeOrigin: true, // 是否更改请求头中的 originrewrite: (path) => path.replace(/^\/api/, ''), // 路径重写，去掉 /api 前缀},},},build: {outDir: 'dist', // 构建输出目录assetsDir: 'assets', // 静态资源存放目录minify: 'terser', // 使用 terser 进行压缩（支持压缩 JavaScript）terserOptions: {compress: {drop_console: true, // 删除 console 语句drop_debugger: true, // 删除 debugger 语句},},rollupOptions: {input: {main: './index.html', // 主入口文件nested: './nested/index.html', // 子页面入口文件},},},resolve: {alias: { // 路径别名配置'@': path.resolve(__dirname, './src'), // 将 @ 映射为 src 目录},},
});

核心配置说明

1、plugins：插件列表，用于增强 Vite 的功能。

vue()：启用对 Vue 3 单文件组件的支持。
AutoImport：自动导入常用的 Vue、Pinia、Vue Router 等
API，减少手动导入。 Components：自动注册 Vue 组件，无需在每个文件中手动导入。 ElementPlus：按需加载
Element Plus 组件，提升性能并减少包体积。

2、server：开发服务器配置。

port：指定本地开发服务器监听的端口号。 open：是否在启动时自动打开浏览器。 proxy：设置反向代理，解决开发环境下的跨域问题。

3、build：构建生产环境时的配置。

outDir：指定构建输出的目录，默认是 dist。 assetsDir：静态资源的存放路径。 minify：指定压缩工具，通常使用
terser 来压缩 JavaScript。 terserOptions：自定义 Terser 压缩选项，如删除调试代码。
rollupOptions.input：多页面应用的入口配置。

4、resolve：用于配置模块解析行为。它告诉 Vite 如何查找和加载模块。