Vite 打包工具教程

左Python右Java
111 阅读5分钟

Vite 打包工具教程

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

一、环境准备与安装

1. 环境要求

  • Node.js 环境（建议使用 16.0 或更高版本）
  • npm 或 yarn 包管理工具

2. 创建 Vite 项目

Vite 提供了快速创建项目的方式：

# 使用 npm
npm create vite@latest . -- --template vue

# 使用 yarn
yarn create vite . -- --template vue

# 使用 pnpm
pnpm create vite . -- --template vue

其中模板选项可以是：

  • vue - Vue 3 项目
  • vue-ts - Vue 3 + TypeScript 项目
  • react - React 项目
  • react-ts - React + TypeScript 项目
  • vanilla - 原生 JavaScript 项目
  • vanilla-ts - 原生 TypeScript 项目

二、Vite 项目结构

创建项目后，典型的文件结构如下：

my-vite-project/
├── public/           # 静态资源文件夹
├── src/
│   ├── assets/       # 源代码中的静态资源
│   ├── components/   # 组件
│   ├── App.vue       # 根组件
│   ├── main.js       # 入口文件
│   └── style.css     # 全局样式
├── index.html        # HTML 入口
├── package.json      # 项目配置
├── vite.config.js    # Vite 配置文件
└── README.md

三、基础配置

1. 配置文件结构

Vite 使用 vite.config.js 或 vite.config.ts 作为配置文件：

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

export default defineConfig({
  // 配置选项
})

2. 核心配置项

项目基础配置
export default defineConfig({
  // 项目根目录（默认当前工作目录）
  root: path.resolve(__dirname, 'src'),
  
  // 部署基础路径（默认 '/'）
  base: '/your-project/', // 适用于子路径部署
  
  // 静态资源目录（默认 'public'）
  publicDir: 'public',
  
  // 环境变量目录（默认根目录）
  envDir: './env',
  
  // 环境变量前缀（默认 'VITE_'）
  envPrefix: 'APP_'
})

四、开发服务器配置

1. 基本服务器设置

export default defineConfig({
  server: {
    port: 3000,         // 端口号
    host: '0.0.0.0',    // 允许外部访问
    open: true,         // 启动时自动打开浏览器
    cors: true,         // 启用 CORS
    strictPort: false,  // 端口占用是否自动切换
  }
})

2. 代理配置（解决跨域）

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端服务地址
        changeOrigin: true,              // 是否更改请求头中的 origin
        rewrite: (path) => path.replace(/^\/api/, '')  // 路径重写
      }
    }
  }
})

五、构建配置

1. 基本构建选项

export default defineConfig({
  build: {
    outDir: 'dist',           // 输出目录
    assetsDir: 'assets',      // 静态资源目录
    assetsInlineLimit: 4096,  // 小于 4KB 的资源转为 base64
    sourcemap: false,         // 生产环境 sourcemap（可选）
    minify: 'esbuild',        // 压缩工具（esbuild/terser）
    cssCodeSplit: true,       // CSS 代码分割
    reportCompressedSize: false // 禁用压缩大小报告
  }
})

2. 优化构建配置

export default defineConfig({
  build: {
    // 移除 console.log
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

六、路径别名配置

1. 基本路径别名

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  }
})

2. TypeScript 项目额外配置

对于 TypeScript 项目，还需要在 tsconfig.json 中配置路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

七、插件配置

1. Vue 插件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vue2 from '@vitejs/plugin-vue2' // Vue 2 项目使用

export default defineConfig({
  plugins: [
    // Vue 3 项目
    vue(),
    
    // 或者 Vue 2 项目
    // vue2()
  ]
})

2. React 插件配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactSwc from '@vitejs/plugin-react-swc' // 使用 SWC 编译的更快版本

export default defineConfig({
  plugins: [
    // 标准 React 插件
    // react(),
    
    // 或者使用 SWC 插件
    reactSwc()
  ]
})

3. 自动导入插件

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // 自动导入 Vue、Pinia 等常用 API
      imports: ['vue', 'vue-router', 'pinia'],
      dts: true // 生成 auto-imports.d.ts 类型声明文件
    }),
    Components({
      // 自动注册 Vue 组件
      extensions: ['vue'],
      dts: true // 生成 components.d.ts 类型声明文件
    })
  ]
})

八、常用命令

1. 开发命令

# 启动开发服务器
npm run dev

# 启动并自动打开浏览器
npm run dev -- --open

2. 构建命令

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

九、静态资源处理

1. 引用静态资源

在组件中引用静态资源：

<template>
  <img src="@/assets/logo.png" alt="Logo">
</template>

<script>
import logo from '@/assets/logo.png'
export default {
  setup() {
    return {
      logo
    }
  }
}
</script>

2. 公共资源

放在 public 文件夹中的资源会被原样复制到输出目录，可以通过根路径直接访问：

<img src="/favicon.ico" alt="Favicon">

十、环境变量

1. 创建环境变量文件

.env                # 所有环境通用
.env.local          # 所有环境通用，但会被 git 忽略
.env.development    # 开发环境
.env.production     # 生产环境

2. 使用环境变量

在 .env 文件中定义：

VITE_APP_TITLE=My Vite App
VITE_API_URL=http://localhost:8080/api

在代码中使用：

console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_API_URL)

十一、生产环境优化

1. 代码分割

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          element: ['element-plus'],
          utils: ['lodash-es']
        }
      }
    }
  }
})

2. CDN 优化

对于大型依赖，可以考虑使用 CDN 引入：

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

十二、完整配置示例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  // 基础配置
  base: '/',
  
  // 插件配置
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: true
    }),
    Components({
      extensions: ['vue'],
      dts: true
    })
  ],
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  },
  
  // 开发服务器
  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'esbuild',
    cssCodeSplit: true,
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          ui: ['element-plus']
        }
      }
    }
  }
})

十三、常见问题与最佳实践

1. 性能优化建议

  • 合理配置路径别名，简化导入语句
  • 使用自动导入插件减少手动导入
  • 针对大型项目配置代码分割
  • 使用 CDN 加速第三方库的加载
  • 开发环境使用更快的编译器（如 @vitejs/plugin-react-swc）

2. 跨域问题解决

  • 使用 Vite 的 proxy 配置代理 API 请求
  • 后端服务设置正确的 CORS 头

通过这份教程，你应该能够快速上手 Vite 并应用于实际项目中。Vite 的快速开发体验和优化的构建输出使其成为现代前端开发的理想选择。

avatar
文章
阅读
粉丝