loyalvi
06 Vite
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

vite

关键词

  • vite
    • 双模式设计优化开发体验
      • websocket
      • 热更新，解决改一行代码等半天的问题
    • 插件架构
  • webpack
    • 配置复杂
    • 开发时打包慢

vite

以下是 Vite 中常用的配置项及其说明，适用于大多数前端项目：

1. 基本配置 (vite.config.js)

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果是 Vue 项目
import react from '@vitejs/plugin-react'; // 如果是 React 项目
export default defineConfig({
  // 根目录（项目入口）
  root: process.cwd(),
  // 公共基础路径（部署子目录时使用）
  base: '/my-project/', 
  // 静态资源目录（默认 public）
  publicDir: 'public',
});

2. 插件配置

1
2
3
4
5
6
7
8
9
10
11
plugins: [
  // Vue 插件
  vue(), 
  // React 插件
  react(),
  // 其他常用插件：
  // - 自动导入组件（如 unplugin-vue-components）
  // - PWA 支持（vite-plugin-pwa）
  // - SVG 图标处理（vite-plugin-svg-icons）
  // - Mock 数据（vite-plugin-mock）
],

3. 路径解析 (resolve)

1
2
3
4
5
6
7
8
9
resolve: {
  // 路径别名
  alias: {
    '@': path.resolve(__dirname, './src'),
    'components': path.resolve(__dirname, './src/components'),
  },
  // 自动解析扩展名
  extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
},

4. 开发服务器 (server)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server: {
  // 监听地址和端口
  host: '0.0.0.0',
  port: 3000,
  // 代理配置（解决跨域）
  proxy: {
    '/api': {
      target: 'http://backend-server:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  },
  // 自动打开浏览器
  open: true
},

5. 构建配置 (build)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
build: {
  // 输出目录（默认 dist）
  outDir: 'dist',
  // 静态资源目录（默认 assets）
  assetsDir: 'static',
  // 生成 sourcemap（可选 'inline'/'hidden'）
  sourcemap: true,
  // 代码压缩配置
  minify: 'terser', // 或 'esbuild'
  terserOptions: {
    compress: {
      drop_console: true, // 移除 console
    }
  },
  // 分块策略
  rollupOptions: {
    output: {
      manualChunks: (id) => {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      }
    }
  },
  // 库模式（构建库时使用）
  lib: {
    entry: 'src/main.js',
    name: 'MyLib',
    fileName: (format) => `my-lib.${format}.js`
  }
},

6. CSS 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
css: {
  // CSS 预处理器配置
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/variables.scss";`
    },
    less: {
      math: 'always'
    }
  },
  // CSS Modules 配置
  modules: {
    localsConvention: 'camelCaseOnly',
    generateScopedName: '[name]__[local]--[hash:base64:5]'
  }
},

7. 环境变量与模式

1
2
3
4
5
6
// 通过 .env 文件加载变量
// .env.development / .env.production
// 定义全局变量
define: {
  __APP_VERSION__: JSON.stringify('1.0.0'),
},

8. 优化配置

1
2
3
4
5
optimizeDeps: {
  // 预构建依赖
  include: ['lodash-es', 'axios'],
  exclude: ['vue-demi']
},

常用插件推荐

  1. 自动导入：unplugin-auto-import（自动导入 API）
  2. 可视化分析：rollup-plugin-visualizer（构建体积分析）
  3. PWA：vite-plugin-pwa（渐进式 Web 应用支持）
  4. 检查插件：vite-plugin-inspect（调试插件中间状态）

完整示例（Vue 项目）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  server: {
    port: 8080,
    proxy: {
      '/api': 'http://localhost:3000'
    }
  },
  build: {
    outDir: 'build',
    assetsInlineLimit: 4096 // 小于 4KB 的资源转为 base64
  }
});

根据具体需求选择配置项，大多数项目不需要配置全部选项。可以通过 npx vite --config my-config.js 指定自定义配置文件。

vite 和 webpack

Vite 和 Webpack 都是前端开发中常用的工具，但它们在设计理念、功能和使用场景上存在显著区别。以下是它们的主要区别：

1. 设计理念

  • Webpack：
    • Webpack 是一个通用的模块打包工具，它将各种资源（如 JavaScript、CSS、图片等）视为模块，并通过配置将它们打包成最终的静态资源。
    • 它的设计目标是高度可配置和可扩展，适用于各种复杂项目的需求。
    • Webpack 的核心是通过 loader 和 plugin 机制，对资源进行处理和优化。
  • Vite：
    • Vite 是一个现代化的前端开发工具，专注于开发体验的优化。
    • 它的设计目标是利用原生 ES 模块（ESM）的特性，提供“冷启动”速度极快的开发服务器，并在生产环境中使用 Rollup 进行高效的打包。
    • Vite 的核心是“无需打包”的开发模式，通过原生 ESM 的热模块替换（HMR）实现快速开发。

2. 开发体验

  • Webpack：
    • 热更新（HMR）：Webpack 提供了热模块替换功能，但需要配置 HotModuleReplacementPlugin，并且在某些情况下可能需要手动处理模块的更新逻辑。
    • 启动速度：Webpack 在开发模式下需要提前打包资源，启动速度相对较慢，尤其是对于大型项目。
    • 配置复杂性：Webpack 的配置较为复杂，需要手动配置 entry、output、loaders 和 plugins 等。
  • Vite：
    • 热更新（HMR）：Vite 基于原生 ESM 实现了高效的 HMR，无需额外配置，且更新速度更快。
    • 启动速度：Vite 利用原生 ESM 的特性，无需提前打包，启动速度极快。
    • 配置简化：Vite 的配置文件（vite.config.js）更简洁，大多数情况下默认配置即可满足需求。

3. 生产环境打包

  • Webpack：
    • Webpack 提供了强大的生产环境打包功能，支持代码分割、Tree-shaking、压缩、缓存等优化。
    • 通过 optimization 配置项和各种插件，可以实现高度定制化的打包策略。
  • Vite：
    • Vite 在生产环境中使用 Rollup 进行打包，Rollup 本身也提供了高效的代码分割、Tree-shaking 和压缩功能。
    • Vite 的生产打包配置相对简洁，但功能上并不逊色于 Webpack。

4. 功能与扩展性

  • Webpack：
    • 功能强大，支持几乎所有的前端资源处理。
    • 通过 loader 和 plugin 机制，可以高度扩展，适用于各种复杂需求。
    • 社区插件丰富，几乎可以找到解决任何问题的插件。
  • Vite：
    • 功能更聚焦于现代前端开发的常见需求，如 Vue、React 等框架的快速开发。
    • 扩展性主要通过插件系统实现，但插件生态相对 Webpack 较小。
    • Vite 的插件机制更接近 Rollup 的插件系统，更注重性能和简洁性。

5. 性能

  • Webpack：
    • 在开发模式下，Webpack 的启动速度较慢，但可以通过缓存等机制优化。
    • 生产环境打包速度相对较慢，但可以通过多线程、缓存等优化。
  • Vite：
    • 开发模式下启动速度极快，热更新响应迅速。
    • 生产环境打包速度也较快，因为 Rollup 的设计更注重性能。

6. 适用场景

  • Webpack：
    • 适用于复杂项目，尤其是需要高度定制化打包策略的项目。
    • 适合需要处理多种资源（如 Webpack Dev Server、CSS Modules、图片处理等）的场景。
  • Vite：
    • 适用于现代前端开发，尤其是基于 Vue、React 等框架的项目。
    • 适合追求快速开发体验的项目，尤其是中小型项目。

总结

  • Webpack 是一个功能强大、高度可扩展的模块打包工具，适用于复杂项目和需要高度定制化的场景。
  • Vite 是一个现代化的开发工具，专注于快速开发体验和高效的生产打包，适合现代前端开发（如 Vue、React）和中小型项目。
    在实际开发中，可以根据项目需求选择合适的工具。如果项目复杂且需要高度定制化，Webpack 是更好的选择；如果追求快速开发体验，Vite 是一个不错的选择。

Vite 原理与实现一个简单的 Vite

1. Vite 的核心原理

Vite 是一个现代化的前端开发工具，由 Vue.js 的作者尤雨溪开发，旨在提供快速的开发体验和高效的构建流程。Vite 的核心原理可以总结为以下几个方面：

  1. 原生 ESM 支持
    Vite 利用浏览器原生的 ES 模块（ESM）支持，直接从磁盘加载模块，无需提前打包。这使得开发环境的启动速度极快。
  2. 开发服务器与 WebSocket
    Vite 启动时会创建一个开发服务器，并通过 WebSocket 与浏览器建立实时通信。当文件发生变化时，Vite 会通过 WebSocket 将更新推送到浏览器，实现热模块替换（HMR），无需重新加载页面。
  3. 文件监听与热更新
    Vite 使用 chokidar 监听文件系统的变化。当文件被修改时，Vite 会重新处理受影响的模块，并通过 WebSocket 将更新后的模块发送给浏览器。
  4. 模块转换与缓存
    对于需要转换的模块（如 Vue 组件、React 组件等），Vite 会调用相应的插件进行处理，并将结果缓存起来。后续请求可以直接从缓存中读取，进一步提升开发效率。
  5. 生产环境构建
    在生产环境中，Vite 使用 Rollup 进行代码打包和优化，生成高效的生产代码。

2. 如何实现一个简单的 Vite

虽然从零实现一个完整的 Vite 是一个复杂的任务，但可以通过以下步骤实现一个简化版的 Vite，帮助理解其核心机制：

  1. 项目初始化 创建一个项目目录，并初始化 npm 项目： 
    1
    2
    3
    mkdir simple-vite
    cd simple-vite
    npm init -y
  2. 安装依赖 安装必要的依赖，如 express（用于创建开发服务器）和 chokidar（用于文件监听）： 
    1
    npm install express chokidar
  3. 创建开发服务器 创建一个简单的开发服务器，监听文件变化并通过 WebSocket 通知浏览器： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    // server.js
    const express = require('express');
    const WebSocket = require('ws');
    const chokidar = require('chokidar');
    const path = require('path');
    const app = express();
    const server = app.listen(3000, () => {
      console.log('Server running at http://localhost:3000');
    });
    // WebSocket 服务
    const wss = new WebSocket.Server({ server });
    wss.on('connection', (ws) => {
      ws.on('message', (message) => {
        console.log('received: %s', message);
      });
      ws.send('something');
    });
    // 文件监听
    const watcher = chokidar.watch(path.resolve(__dirname, 'src'), {
      ignored: /node_modules/,
    });
    watcher.on('change', (path) => {
      console.log(`File ${path} changed`);
      wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({ type: 'update', path }));
        }
      });
    });
    // 静态文件服务
    app.use(express.static(path.resolve(__dirname, 'public')));
  4. 创建客户端代码 在 public/index.html 中添加一个简单的页面，并通过 WebSocket 监听服务器的更新： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Simple Vite</title>
    </head>
    <body>
      <div id="app">Hello, Vite!</div>
      <script>
        const socket = new WebSocket('ws://localhost:3000');
        socket.onmessage = (event) => {
          const data = JSON.parse(event.data);
          console.log('Update received:', data);
          // 实现简单的 HMR
          if (data.type === 'update') {
            console.log(`Updated file: ${data.path}`);
            // 可以在这里实现模块热替换逻辑
          }
        };
      </script>
    </body>
    </html>
  5. 启动服务器 运行开发服务器： 
    1
    node server.js
    访问 http://localhost:3000，修改 src 目录下的文件，观察浏览器是否接收到更新。

3. 总结

通过上述步骤，我们实现了一个简化的 Vite 开发环境。虽然它无法完全替代 Vite 的所有功能，但可以帮助理解 Vite 的核心机制，如文件监听、WebSocket 通信和热模块替换。完整的 Vite 实现还包括模块解析、插件系统和生产环境构建等功能。

Vite 采用 ESbuild 和 Rollup 的双模式设计

Vite 采用 ESbuild 和 Rollup 的双模式设计，主要是为了在开发效率和生产性能之间取得最佳平衡。以下是具体原因：

1. 开发环境：使用 ESbuild

  • 快速编译与热更新：ESbuild 是一个基于 Go 语言编写的工具，以极高的编译速度著称。它能够在开发环境中快速处理模块的编译和热更新任务，提供即时反馈，显著提升开发体验。
  • 即时反馈：在开发过程中，开发者需要快速看到代码更改的效果。ESbuild 的高速编译能力使得 Vite 能够在几毫秒内完成模块的重新编译，从而实现快速热模块替换（HMR）。
  • 简化开发流程：ESbuild 的设计目标是速度，适合快速编译和打包任务，能够满足开发阶段对效率的高要求。

2. 生产环境：使用 Rollup

  • 高效打包与优化：Rollup 是一个功能强大的模块打包器，擅长生成优化后的静态资源。它支持代码压缩、Tree Shaking（去除未使用的代码）、代码拆分等特性，能够生成高效、优化的代码。
  • 灵活性与插件生态：Rollup 提供了丰富的插件生态系统和细粒度的配置选项，可以满足生产环境中复杂的构建需求。
  • 模块化支持：Rollup 原生支持 ESM 格式，能够将模块化的代码打包成多种格式（如 CommonJS、UMD 等），适合各种不同的使用场景。

3. 为什么采用双模式？

  • 开发效率与生产性能的平衡：ESbuild 和 Rollup 各有优势，ESbuild 专注于快速开发，而 Rollup 专注于高效打包和优化。通过结合两者，Vite 能够在开发阶段提供快速响应，在生产阶段生成优化后的代码。
  • 工具的专长互补：ESbuild 的速度优势在开发阶段至关重要，而 Rollup 的功能丰富性和灵活性则更适合生产环境的复杂需求。
    这种“开发时快速，生产时优化”的策略是 Vite 设计理念的一部分，旨在同时提升开发效率和最终产品的性能。

ESbuild

esbuild 是一个现代的、高性能的 JavaScript 构建工具，由 Evan Wallace 开发，使用 Go 语言编写。它专为快速构建和优化前端项目而设计，尤其在开发环境中表现出色。以下是关于 esbuild 的详细介绍：

1. esbuild 的特点

  • 高性能
    • esbuild 的核心是用 Go 语言编写的，这使得它的运行速度极快。例如，它可以在几毫秒内完成模块的重新编译，非常适合开发环境中的快速热重载。
    • 它的性能比传统的构建工具（如 Webpack）快很多，尤其是在处理大型项目时。
  • 功能丰富
    • 模块打包：esbuild 支持将多个模块打包成一个或多个文件，支持多种模块格式（如 ES 模块、CommonJS 等）。
    • 代码压缩：提供代码压缩功能，可以减小打包后的文件体积。
    • Tree Shaking：自动移除未使用的代码，进一步优化打包结果。
    • 插件系统：虽然插件生态系统不如 Webpack 或 Rollup 丰富，但 esbuild 也支持插件扩展。
  • 简单易用
    • esbuild 的 API 非常简洁，易于上手。无论是通过命令行工具还是编程接口，都可以快速配置和使用。
    • 它提供了默认的构建配置，减少了开发者的配置工作。

2. esbuild 的使用场景

  • 开发环境
    • esbuild 是 Vite 的核心构建工具之一，用于开发环境中的快速模块编译和热重载。它能够在几毫秒内完成模块的重新编译，极大地提高了开发效率。
  • 小型项目
    • 对于一些对构建速度要求较高、依赖较少的小型项目，esbuild 是一个很好的选择。它能够快速打包和优化代码，减少开发时间。
  • 快速构建
    • 在需要快速构建和部署的场景中，esbuild 可以显著减少构建时间。例如，在 CI/CD 流程中，使用 esbuild 可以加快构建速度。

3. esbuild 的安装和使用

安装

可以通过 npm 安装 esbuild：

1
npm install esbuild --save-dev

基本用法

以下是一个简单的 esbuild 使用示例，将一个 ES 模块打包成一个文件：

1
2
3
4
5
6
7
8
import esbuild from 'esbuild';
esbuild.build({
  entryPoints: ['src/index.js'], // 入口文件
  bundle: true, // 是否打包
  minify: true, // 是否压缩代码
  outfile: 'dist/bundle.js', // 输出文件
  format: 'esm', // 输出格式（ESM 或 CommonJS）
}).catch(() => process.exit(1));

命令行工具

esbuild 也提供了命令行工具，可以直接在终端中使用：

1
npx esbuild src/index.js --bundle --minify --outfile=dist/bundle.js --format=esm

4. esbuild 的优势

  • 性能卓越：esbuild 的编译速度比传统的构建工具快很多，尤其是在处理大型项目时。
  • 功能强大：它支持模块打包、代码压缩、Tree Shaking 等功能，能够满足大多数前端项目的构建需求。
  • 简单易用：esbuild 的 API 简洁明了，易于上手。它提供了默认的构建配置，减少了开发者的配置工作。

5. esbuild 的局限性

  • 插件生态系统不够丰富：与 Webpack 或 Rollup 相比，esbuild 的插件生态系统还不够完善。这可能会影响一些复杂项目的构建需求。
  • 功能相对有限：虽然 esbuild 提供了基本的构建功能，但在一些高级特性（如代码拆分、懒加载等）方面，不如 Webpack 或 Rollup 强大。

6. esbuild 的未来发展方向

  • 持续优化性能：esbuild 的开发团队一直在努力优化其性能。未来，esbuild 的编译速度可能会进一步提升。
  • 扩展插件生态系统：随着 esbuild 的普及，其插件生态系统可能会逐渐丰富。这将为开发者提供更多扩展功能的机会。
  • 与其他工具的集成：esbuild 可能会与其他构建工具（如 Webpack 或 Rollup）进行更深入的集成。这将为开发者提供更多选择。

总结

esbuild 是一个高性能的构建工具，适用于快速开发和模块打包。它具有高性能、功能丰富、简单易用等优点，但也存在插件生态系统不够丰富、功能相对有限等局限性。在未来，esbuild 有望持续优化性能、扩展插件生态系统，并与其他构建工具进行更深入的集成。

Rollup

Vite 是一种现代化的前端开发工具，它在开发环境和生产环境中分别使用了不同的构建工具：esbuild 和 Rollup。

开发环境

在开发环境中，Vite 使用 esbuild 来提供快速的热重载和模块编译。esbuild 是一个基于 Go 语言编写的工具，编译速度非常快，能够在几毫秒内完成模块的重新编译，从而为开发者提供即时反馈。

生产环境

在生产环境中，Vite 使用 Rollup 来进行最终的打包和优化。Rollup 是一个功能强大的模块打包器，擅长生成优化后的静态资源，如代码压缩、Tree Shaking 等。以下是 Rollup 的一些主要优点：

  • Tree Shaking：自动移除未使用的代码，减小打包后的文件体积。
  • 代码拆分：将代码分割成多个块，按需加载，提高加载速度。
  • 模块化打包：支持 ESM 格式，可将模块化代码打包成多种格式。
  • 插件系统：拥有丰富的插件生态系统，可自定义构建过程。

Vite 中的 Rollup 配置

在 Vite 中，可以通过 vite.config.js 文件来配置 Rollup 的选项。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist', // 指定输出目录
    sourcemap: true, // 生成 source map 文件
    rollupOptions: {
      input: {
        main: 'index.html',
        nested: 'nested/index.html'
      },
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
      }
    }
  }
});

在上述配置中，rollupOptions 用于自定义 Rollup 的输入和输出配置。

性能优化

Vite 在生产构建中利用 Rollup 的能力，进行了以下优化：

  • CSS 代码分割：将异步模块中的 CSS 抽取出来生成单独文件，提高缓存复用率。
  • 自动预加载：为入口 chunk 的依赖自动生成预加载标签，提前下载资源。
  • 异步 Chunk 加载优化：优化异步 Chunk 的依赖加载方式，减少网络开销。
    通过结合 esbuild 和 Rollup，Vite 在开发阶段提供快速响应，在生产阶段生成高效、优化的代码，平衡了开发效率和构建性能。

vite 实例

Vue 3 + Vite 项目搭建与集成

1. 项目初始化

Vite 是一个现代化的前端开发工具，它利用浏览器原生的 ES Module 特性实现快速开发，并结合 Rollup 进行生产打包。以下是使用 Vite 快速搭建 Vue 3 项目的步骤：

  1. 创建项目 使用 Vite 的命令行工具创建一个新的 Vue 3 项目： 
    1
    npm create vite@latest my-vue-app -- --template vue
    或者使用 Yarn： 
    1
    yarn create vite my-vue-app --template vue
  2. 安装依赖 进入项目目录并安装依赖： 
    1
    2
    cd my-vue-app
    npm install
  3. 启动开发服务器 启动项目： 
    1
    npm run dev
    此时，Vite 会自动启动开发服务器，通常访问 http://localhost:5173 即可查看。

2. 配置 Vite

Vite 的配置文件是 vite.config.js，位于项目根目录。你可以在这里配置别名、代理等。
例如，配置别名和代理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true
      }
    }
  }
});

3. 集成 Vue Router 和其他工具

  1. 安装 Vue Router 
    1
    npm install vue-router@4
  2. 配置路由 在 src 目录下创建 router/index.js 文件： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    const routes = [
      { path: '/', component: Home }
    ];
    const router = createRouter({
      history: createWebHistory(),
      routes
    });
    export default router;
  3. 集成 Element Plus 安装 Element Plus： 
    1
    npm install element-plus
    在 main.js 中引入： 
    1
    2
    3
    4
    5
    6
    7
    import { createApp } from 'vue';
    import App from './App.vue';
    import ElementPlus from 'element-plus';
    import 'element-plus/dist/index.css';
    const app = createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
  4. 使用 TypeScript 如果需要使用 TypeScript，可以在初始化项目时选择 vue-ts 模板： 
    1
    npm create vite@latest my-vue-app -- --template vue-ts

4. 开发与部署

  1. 开发模式 Vite 提供了热模块替换（HMR）和按需编译功能，开发体验极佳。
  2. 生产部署 构建项目： 
    1
    npm run build
    构建完成后，dist 目录会包含打包后的静态文件，可以直接部署到服务器。

5. 高级特性

  1. 使用 Composition API Vue 3 的 Composition API 提供了更灵活的逻辑复用能力。
  2. 代码分割与懒加载 使用动态导入实现路由懒加载，减少初始加载时间。

总结

Vue 3 和 Vite 的结合为现代前端开发提供了强大的工具支持。Vite 的快速开发体验和 Vue 3 的性能优化（如基于 Proxy 的响应式系统）使得开发效率大幅提升。

06 Vite
posts/f906386c/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. vite
    1. 关键词
    2. vite
    3. 以下是 Vite 中常用的配置项及其说明，适用于大多数前端项目：
      1. 1. 基本配置 (vite.config.js)
      2. 2. 插件配置
      3. 3. 路径解析 (resolve)
      4. 4. 开发服务器 (server)
      5. 5. 构建配置 (build)
      6. 6. CSS 配置
      7. 7. 环境变量与模式
      8. 8. 优化配置
      9. 常用插件推荐
      10. 完整示例（Vue 项目）
    4. vite 和 webpack
      1. 1. 设计理念
      2. 2. 开发体验
      3. 3. 生产环境打包
      4. 4. 功能与扩展性
      5. 5. 性能
      6. 6. 适用场景
      7. 总结
    5. Vite 原理与实现一个简单的 Vite
      1. 1. Vite 的核心原理
      2. 2. 如何实现一个简单的 Vite
      3. 3. 总结
    6. Vite 采用 ESbuild 和 Rollup 的双模式设计
      1. 1. 开发环境：使用 ESbuild
      2. 2. 生产环境：使用 Rollup
      3. 3. 为什么采用双模式？
    7. ESbuild
      1. 1. esbuild 的特点
      2. 2. esbuild 的使用场景
      3. 3. esbuild 的安装和使用
        1. 安装
        2. 基本用法
        3. 命令行工具
      4. 4. esbuild 的优势
      5. 5. esbuild 的局限性
      6. 6. esbuild 的未来发展方向
      7. 总结
    8. Rollup
      1. 开发环境
      2. 生产环境
      3. Vite 中的 Rollup 配置
      4. 性能优化
    9. vite 实例
      1. Vue 3 + Vite 项目搭建与集成
        1. 1. 项目初始化
        2. 2. 配置 Vite
        3. 3. 集成 Vue Router 和其他工具
        4. 4. 开发与部署
        5. 5. 高级特性
      2. 总结
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. vite
    1. 关键词
    2. vite
    3. 以下是 Vite 中常用的配置项及其说明，适用于大多数前端项目：
      1. 1. 基本配置 (vite.config.js)
      2. 2. 插件配置
      3. 3. 路径解析 (resolve)
      4. 4. 开发服务器 (server)
      5. 5. 构建配置 (build)
      6. 6. CSS 配置
      7. 7. 环境变量与模式
      8. 8. 优化配置
      9. 常用插件推荐
      10. 完整示例（Vue 项目）
    4. vite 和 webpack
      1. 1. 设计理念
      2. 2. 开发体验
      3. 3. 生产环境打包
      4. 4. 功能与扩展性
      5. 5. 性能
      6. 6. 适用场景
      7. 总结
    5. Vite 原理与实现一个简单的 Vite
      1. 1. Vite 的核心原理
      2. 2. 如何实现一个简单的 Vite
      3. 3. 总结
    6. Vite 采用 ESbuild 和 Rollup 的双模式设计
      1. 1. 开发环境：使用 ESbuild
      2. 2. 生产环境：使用 Rollup
      3. 3. 为什么采用双模式？
    7. ESbuild
      1. 1. esbuild 的特点
      2. 2. esbuild 的使用场景
      3. 3. esbuild 的安装和使用
        1. 安装
        2. 基本用法
        3. 命令行工具
      4. 4. esbuild 的优势
      5. 5. esbuild 的局限性
      6. 6. esbuild 的未来发展方向
      7. 总结
    8. Rollup
      1. 开发环境
      2. 生产环境
      3. Vite 中的 Rollup 配置
      4. 性能优化
    9. vite 实例
      1. Vue 3 + Vite 项目搭建与集成
        1. 1. 项目初始化
        2. 2. 配置 Vite
        3. 3. 集成 Vue Router 和其他工具
        4. 4. 开发与部署
        5. 5. 高级特性
      2. 总结