异常教程

vite和vue-cli的区别（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，项目构建工具的选择直接影响到开发效率和代码质量。Vue.js 生态中，Vue CLI 和 Vite 是两个广受欢迎的构建工具，它们分别代表了传统构建方案和新兴技术路线。对于编程初学者和中级开发者而言，理解两者的区别与适用场景，能够帮助开发者快速上手项目并优化开发流程。本文将从技术原理、使用体验、配置扩展性等维度，结合具体案例和代码示例，深入浅出地对比 vite 和 vue-cli 的区别。

一、技术背景与核心设计理念

1.1 Vue CLI：基于 Webpack 的传统构建方案

Vue CLI 是 Vue.js 官方提供的脚手架工具，其核心依赖于 Webpack 这一老牌构建工具。Webpack 的工作原理可以类比为“快递分拣中心”：它将代码和资源打包成模块，通过复杂的编译流程（如加载器、插件）将代码转换为浏览器可识别的格式。

核心特点：

  • 模块化处理：通过 loader 和 plugin 系统支持多种文件类型（如 CSS、图片、TypeScript）。
  • 配置灵活：提供丰富的配置选项，但复杂度较高。
  • 生态成熟：与 Vue.js 3.x 之前的版本深度绑定，适配性较强。

示例代码：
Vue CLI 的项目配置文件 vue.config.js 中，可通过 Webpack 插件实现代码压缩：

module.exports = {  
  chainWebpack: config => {  
    config.optimization.minimize(true);  
  }  
};

1.2 Vite：基于原生 ES 模块的现代方案

Vite 的核心设计理念是“无需打包即可开发”。它利用浏览器原生支持的 ES 模块（ESM）特性，在开发阶段直接通过服务器提供模块化资源，仅在生产环境进行打包。这一过程类似于“即时配送服务”：开发时无需等待编译，直接加载原始代码，极大提升了开发速度。

核心特点：

  • 闪电般的开发体验：冷启动时间极短，热更新（HMR）几乎无延迟。
  • 轻量且快速：依赖 Rollup 进行生产构建，配置简单。
  • 技术前瞻性：紧跟现代浏览器特性，如原生 ES 模块、TypeScript 支持等。

示例代码：
Vite 的配置文件 vite.config.js 非常简洁，例如配置代理：

import { defineConfig } from 'vite';  
export default defineConfig({  
  server: {  
    proxy: {  
      '/api': {  
        target: 'http://localhost:3000',  
        changeOrigin: true,  
      }  
    }  
  }  
});

二、核心区别对比

2.1 构建原理与性能表现

对比维度Vue CLIVite
开发阶段通过 Webpack 编译所有资源（如 CSS、JS）直接使用原生 ES 模块，无需编译
生产构建依赖 Webpack 进行打包，耗时较长依赖 Rollup 进行打包，速度更快
冷启动时间较长（尤其是复杂项目）极短（通常几秒内完成）
热更新速度依赖 Webpack 的 HMR 机制，延迟较高原生 HMR 支持，延迟几乎为零

性能差异的直观体现

假设有一个包含 100 个组件的 Vue 项目：

  • Vue CLI：首次启动可能需要 15-30 秒，修改代码后 HMR 需要 2-3 秒。
  • Vite：首次启动仅需 2-5 秒，HMR 几乎实时生效。

2.2 配置复杂度与灵活性

  • Vue CLI：

    • 配置文件 vue.config.js 需要深入理解 Webpack 的工作原理，例如自定义 loader 或 plugin。
    • 示例：配置 CSS 预处理器（如 Sass）： 
      module.exports = {  
  css: {  
    loaderOptions: {  
      sass: {  
        additionalData: `@import "@/styles/variables.scss";`  
      }  
    }  
  }  
};

  • Vite：

    • 配置文件 vite.config.js 更简洁，通过插件系统扩展功能。
    • 示例：配置 Sass： 
      import vue from '@vitejs/plugin-vue';  
import vueJsx from '@vitejs/plugin-vue-jsx';  
import { defineConfig } from 'vite';  
export default defineConfig({  
  plugins: [vue(), vueJsx()],  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "./src/styles/variables.scss";`  
      }  
    }  
  }  
});

2.3 生态支持与兼容性

  • Vue CLI：

    • 与 Vue.js 2.x 和早期版本深度集成，社区提供的插件（如 @vue/cli-plugin-eslint）丰富。
    • 对旧项目迁移友好，但对现代技术（如原生 ESM）的支持有限。

  • Vite：

    • 原生支持 Vue 3.x、React、Svelte 等框架，强调生态兼容性。
    • 对现代 JavaScript 特性（如动态导入、TypeScript）的支持更直接。

三、使用场景与选型建议

3.1 选择 Vue CLI 的场景

  • 场景 1：项目依赖老旧技术栈
    例如，使用 Vue 2.x 或需兼容 IE 11 等旧浏览器时，Vue CLI 的 Webpack 配置能更好地处理 polyfill 和兼容性问题。

  • 场景 2：需要深度定制化构建流程
    如果项目需要自定义 Webpack 插件（如代码分割、特定资源处理），Vue CLI 的灵活性更有优势。

3.2 选择 Vite 的场景

  • 场景 1：新项目或现代化框架
    当开发 Vue 3.x 或其他现代框架时，Vite 的原生 ESM 支持能显著提升开发体验。

  • 场景 2：追求极致开发效率
    对于需要频繁调试的项目（如交互频繁的前端页面），Vite 的热更新速度能减少开发者等待时间。

3.3 混合使用的可能性

某些情况下，开发者可能同时使用两种工具：

  • Vite + Vue CLI：通过 Vite 快速开发，最终使用 Vue CLI 进行生产构建（需额外配置）。
  • Vite 插件生态：Vite 的插件机制兼容性较好，可逐步迁移 Vue CLI 的功能。

四、实战案例：从零构建项目

4.1 创建 Vue 项目

使用 Vue CLI：

npm init @vue/cli

使用 Vite：

npm create vite@latest

4.2 处理大型 JSON 文件

假设项目需要加载一个 10MB 的 JSON 数据文件：

  • Vue CLI：
    需要通过 file-loader 或 url-loader 配置，否则 Webpack 会报错。

    // vue.config.js  
module.exports = {  
  chainWebpack: config => {  
    config.module  
      .rule('json')  
      .use('json-loader')  
      .loader('json-loader');  
  }  
};

  • Vite：
    直接导入 JSON 文件，无需额外配置。

    import largeData from './data/large.json';  
console.log(largeData); // 直接使用

4.3 生产环境构建对比

Vue CLI 的构建日志示例：

> vue-cli-service build  
Hash: a1b2c3d4  
Version: webpack 5.65.0  
Time: 24000ms  
Built at: 2023-08-01 10:00:00  
Assets:  
  app.js  1.2MB  
  ...

Vite 的构建日志示例：

> vite build  
vite v4.0.0  
optimized dependencies: 38 modules  
dist/  
  └── index.html  1.2KB  
  └── assets/  
      └── app.5678.js  890KB  
      └── ...  
Build completed in 5.6s

五、总结与展望

5.1 核心区别总结

维度Vue CLIVite
开发性能较慢，依赖 Webpack 编译极快，原生 ESM 支持
配置复杂度高（Webpack 生态）低（插件化配置）
兼容性传统框架支持更全面现代框架（Vue 3+）优势明显

5.2 选型建议

  • 新手开发者：优先选择 Vite，因其学习成本低且开发体验流畅。
  • 复杂企业级项目：根据技术栈选择，若需深度定制化，Vue CLI 更稳妥；若追求效率，Vite 可作为主力工具。

5.3 未来趋势

随着浏览器对原生 ESM 的支持普及，Vite 的技术路线将越来越主流。Vue CLI 仍会作为过渡工具存在，但其核心功能（如 Webpack 配置）可能逐步被 Vite 的插件生态替代。

通过本文的对比分析，开发者可以清晰理解 vite 和 vue-cli 的区别，并根据自身项目需求选择合适的工具。无论是追求极致性能还是深度定制化，两者都能为前端开发提供可靠的支持。

最新发布

查看更多文章