Vite 教程（完整指南）

Vite 教程：从零搭建现代前端项目

快速解决

直接使用 Vite 创建项目：

npm create vite@latest my-vue-app -- --template vue

这行命令可以快速解决“如何用 Vite 搭建一个 Vue 项目”的问题。Vite 提供了开箱即用的模板，让开发者无需繁琐配置即可启动项目。

常用方法

详细说明

项目初始化

初始化一个 Vue 项目：

npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm run dev

• npm create vite@latest：使用官方 CLI 创建项目
• --template vue：指定使用 Vue 模板
• npm install：安装依赖
• npm run dev：启动开发服务器

插件添加

Vite 支持通过 vite add 命令快速集成官方插件，例如添加 React 支持：

npx vite add react

这会自动安装 React 相关的依赖，并在 vite.config.js 中配置必要的插件。

配置修改

修改 Vite 配置文件 vite.config.js 以添加自定义插件或修改构建行为：

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

export default defineConfig({
  plugins: [vue(), vueJsx()], // 启用 Vue 和 Vue JSX 插件
  server: {
    port: 3000, // 修改开发服务器端口
  },
})

高级技巧

多环境配置

Vite 支持通过 .env 文件管理多环境配置。在项目根目录下创建：

• .env：通用环境变量
• .env.development：开发环境变量
• .env.production：生产环境变量

示例 .env.development 文件内容：

VITE_API_URL=https://api.dev.example.com

然后在代码中通过 import.meta.env 使用：

const apiUrl = import.meta.env.VITE_API_URL
fetch(`${apiUrl}/data`)

使用 Markdown

Vite 默认支持 .md 文件的导入，结合 @vitejs/plugin-react 或 @vitejs/plugin-vue 可实现 Markdown 与组件混合开发：

npm install markdown-it

然后在 vite.config.js 中添加：

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

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

接着在 App.vue 中导入 Markdown：

<script setup>
import md from './README.md?raw'
</script>

<template>
  <div v-html="md"></div>
</template>

配置自定义别名

使用 resolve.alias 配置路径别名，提升开发体验：

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'),
    }
  }
})

之后就可以在代码中使用 @/components/HelloWorld.vue 这样的路径了。

常见问题

1. Vite 和 Webpack 有什么区别？

Vite 采用原生 ES 模块 (ESM) 在开发环境下加载代码，相比 Webpack 的打包编译方式，启动速度更快，热更新也更高效。适合现代前端框架（如 Vue、React）的开发体验优化。

2. 构建后的文件在哪里？

构建后的文件默认输出到 dist/ 目录中。你可以通过 vite build --outDir 修改输出路径：

npm run build -- --outDir my-dist

3. 如何部署 Vite 构建的项目？

部署与普通静态网站相同，将 dist/ 目录中的文件上传到 CDN 或服务器即可。例如部署到 GitHub Pages：

npm install -D gh-pages

在 vite.config.js 中设置：

export default defineConfig({
  base: '/my-vite-app/'
})

再运行构建和部署命令：

npm run build
npx gh-pages -d dist

总结

Vite 教程完整覆盖了项目创建、常用命令、配置修改、插件集成和高级用法，帮助你快速掌握 Vite 的核心功能和实战技巧。