异常教程

安装vite（保姆级教程）

更新时间:

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

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

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

前言

在现代前端开发领域，构建工具的选择直接影响开发效率和项目性能。Vite 作为近年来备受关注的开发服务器工具，凭借其闪电般的启动速度和零配置特性，逐渐成为开发者的新宠。无论是编程初学者还是有一定经验的开发者，掌握 Vite 的安装与使用，都能显著提升开发体验。本文将从基础概念、安装步骤、核心配置及常见问题等角度，系统性地解析如何高效安装和使用 Vite，并通过实际案例帮助读者快速上手。

什么是 Vite？

Vite（法语中意为“快速”）是基于现代浏览器特性的下一代前端构建工具。它通过原生 ES 模块（ESM） 和按需编译技术，实现了开箱即用的热更新（HMR）、快速冷启动（Cold Start）以及轻量化的依赖管理。与传统构建工具（如 Webpack 或 Parcel）相比，Vite 的核心优势在于：

  • 无需打包：开发阶段直接通过浏览器原生支持的 ES 模块加载代码，避免了复杂的打包过程；
  • 即时反馈：代码修改后仅重新编译受影响的模块，热更新延迟可低至毫秒级；
  • 零配置友好：通过预置的插件系统，开发者无需手动配置 Babel、PostCSS 等工具即可使用现代语法。

想象 Vite 就像一支高效的施工队：它不需要提前搭建好整个工地框架（打包），而是根据施工进度（代码修改）动态调配资源，确保每一环节都能快速推进。

安装 Vite 的准备工作

在正式安装 Vite 之前，需要确保开发环境已满足以下条件：

1. Node.js 环境

Vite 依赖 Node.js 运行，建议使用 v16.13+ 或更高版本。可通过以下命令检查版本：

node -v

若未安装或版本过低，可访问 Node.js 官网 下载最新 LTS 版本。

2. 包管理工具

Vite 支持 npm、pnpm 或 yarn 等包管理工具。若使用 npm，需确保其版本 v8.19+ 以上：

npm -v

步骤详解：如何安装 Vite？

Vite 的安装方式分为两种：全局安装与本地安装。根据项目需求选择合适的方式。

全局安装（适用于多项目环境）

全局安装后，可在任意目录通过命令快速初始化项目：

npm install -g create-vite

安装完成后，使用以下命令创建新项目：

npm create vite@latest

执行命令后，系统会提示选择项目名称、框架（如 Vue、React、Svelte 等）及包管理工具。例如，创建一个 React 项目：

Project name: my-vite-project  
Select a framework: » React  
Select a variant: » JavaScript

完成后，进入项目目录并启动开发服务器：

cd my-vite-project  
npm install  
npm run dev

本地安装（推荐单项目使用）

若希望将 Vite 作为项目依赖安装，避免全局环境冲突，可执行以下步骤：

  1. 创建项目文件夹并初始化：
mkdir my-vite-project  
cd my-vite-project  
npm init -y
  1. 安装 Vite 及框架依赖（以 Vue 3 为例）：
npm install vite @vitejs/plugin-vue@latest
  1. 创建 vite.config.js 配置文件（后续章节会详细说明配置方法）：
// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  

export default defineConfig({  
  plugins: [vue()],  
})
  1. 在 package.json 中添加启动脚本：
{  
  "scripts": {  
    "dev": "vite",  
    "build": "vite build"  
  }  
}
  1. 启动开发环境：
npm run dev

Vite 核心配置解析

安装完成后，开发者可通过 vite.config.js 文件进行个性化配置。以下是几个关键配置项的说明：

1. 插件系统

Vite 通过插件机制扩展功能。例如，使用 TypeScript 开发时需安装 @vitejs/plugin-typescript 并配置：

import tsconfigPaths from 'vite-tsconfig-paths'  

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

2. 开发服务器设置

通过 server 字段可调整代理、端口等参数：

export default defineConfig({  
  server: {  
    port: 3000,          // 指定开发服务器端口  
    proxy: {  
      '/api': 'http://localhost:4000' // 配置 API 代理  
    }  
  },  
})

3. 构建优化

在 build 字段中可控制打包输出的大小、压缩策略等：

export default defineConfig({  
  build: {  
    minify: 'esbuild',    // 使用 esbuild 压缩代码  
    rollupOptions: {      // 配置 Rollup 插件  
      plugins: [  
        // 自定义 Rollup 插件  
      ]  
    }  
  }  
})

实战案例：搭建 Vue 3 + Vite 项目

以下通过一个具体案例，演示如何从零开始创建并运行一个 Vue 3 项目：

步骤 1：初始化项目

npm create vite@latest vue-vite-project -- --template vue  
cd vue-vite-project  
npm install

步骤 2：编写组件

在 src 目录下创建 components 文件夹，并添加一个 HelloWorld.vue 组件：

<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <button @click="increment">点击计数</button>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue'  

const msg = ref('Hello Vite!')  
const count = ref(0)  

function increment() {  
  count.value++  
  msg.value = `计数：${count.value}`  
}  
</script>  

<style scoped>  
.hello {  
  padding: 20px;  
  text-align: center;  
}  
</style>

步骤 3：集成到主应用

在 src/main.js 中引入并注册组件：

import { createApp } from 'vue'  
import App from './App.vue'  
import HelloWorld from './components/HelloWorld.vue'  

const app = createApp(App)  
app.component('HelloWorld', HelloWorld)  
app.mount('#app')

步骤 4：启动并调试

运行 npm run dev 后，访问 http://localhost:3000，即可看到按钮点击计数效果。修改代码后，页面会自动刷新，无需手动重启服务。

常见问题与解决方案

Q1: 安装过程中出现依赖冲突

现象：执行 npm install 时提示 npm ERR! code ERESOLVE
解决：尝试升级 npm 版本或使用 --force 参数强制安装：

npm install --force

Q2: 开发服务器无法启动

可能原因：端口被占用或配置文件语法错误
排查步骤：

  1. 检查 package.json 中的 dev 脚本是否正确；
  2. 运行 lsof -i :3000（Mac）或 netstat -ano（Windows）查看端口占用情况；
  3. 确保 vite.config.js 无语法错误。

Q3: 生产环境打包失败

解决：在 vite.config.js 中添加类型声明：

// vite.config.js  
export default defineConfig({  
  optimizeDeps: {  
    include: ['vue', 'vue-router'], // 添加依赖项  
  },  
})

结论

通过本文的讲解，读者应已掌握 Vite 的安装流程、核心配置方法及常见问题解决方案。Vite 的高效性不仅体现在开发阶段，其基于 Rollup 的生产环境打包能力也使其成为全生命周期的可靠工具。对于初学者，Vite 的零配置特性降低了学习门槛；对于中级开发者，其灵活的插件体系和优化选项则提供了深度定制的空间。

未来，随着 Web 标准的持续演进，Vite 将进一步整合新兴技术（如 WebAssembly、模块联邦等），成为前端工程化领域的标杆工具。建议读者通过官方文档和社区案例持续学习，探索 Vite 的更多可能性。

（全文约 1800 字）

最新发布

查看更多文章