Vite 入门指南 #

Vite 是一个现代化的前端构建工具，以其快速的开发服务器和高效的构建性能而闻名。本指南将帮助您快速上手 Vite。

环境要求 #

在开始之前，请确保您已安装 Node.js 版本 >= 14.18 或 >= 16。

创建新项目 #

使用命令行创建 #

您可以使用以下命令快速创建一个新的 Vite 项目：

npm create vite@latest
# 或
yarn create vite
# 或
pnpm create vite@latest

命令会引导您完成项目创建过程：

1. 输入项目名称
2. 选择框架（Vanilla, Vue, React, Preact, Lit, Svelte 等）
3. 选择变体（JavaScript 或 TypeScript）

示例 #

$ npm create vite@latest my-vite-app
Need to install the following packages:
  create-vite@5.0.0
Ok to proceed? (y) y

√ Project name: » my-vite-app
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in D:\my-vite-app...

Done. Now run:

  cd my-vite-app
  npm install
  npm run dev

项目结构 #

创建项目后，您将看到类似以下的目录结构：

my-vite-app/
├── index.html
├── package.json
├── vite.config.ts
├── public/
│   └── favicon.ico
└── src/
    ├── assets/
    ├── components/
    ├── App.vue
    └── main.ts

各文件/目录说明 #

• index.html: 主 HTML 文件，Vite 将在此文件中注入脚本和样式
• package.json: 包含项目依赖和脚本命令
• vite.config.ts: Vite 配置文件
• public/: 静态资源目录，其中的文件会被原样复制到构建输出目录
• src/: 源代码目录
  • assets/: 静态资源，如图片、字体等
  • components/: 组件文件
  • App.vue: 根组件
  • main.ts: 应用入口文件

安装依赖 #

进入项目目录并安装依赖：

cd my-vite-app
npm install

启动开发服务器 #

安装完成后，运行开发服务器：

npm run dev

这将启动开发服务器，默认运行在 http://localhost:5173。

构建生产版本 #

要构建用于生产的版本，运行：

npm run build

这将创建一个 dist 目录，其中包含优化后的静态资源。

本地预览生产构建 #

构建完成后，可以使用以下命令预览生产构建：

npm run preview

这将在本地启动一个服务器来模拟生产环境。

基本配置 #

创建 vite.config.js（或 vite.config.ts）来配置 Vite：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true, // 自动在浏览器中打开
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    minify: 'terser', // 指定压缩方式
    sourcemap: true // 生成 sourcemap 文件
  }
})

常用命令 #

智能提示 #

Vite 与 VS Code 等编辑器配合使用时，可以提供智能提示。推荐安装以下插件：

• Vite
• Vetur 或 Volar（Vue 项目）
• TypeScript + Webpack/Jest/Other plugins（根据项目类型）

常见问题 #

1. 端口被占用 #

如果默认端口 5173 被占用，Vite 会自动尝试下一个可用端口（5174、5175 等）。

2. 环境变量 #

在代码中使用环境变量：

// 使用环境变量
console.log(import.meta.env.VITE_API_URL)

3. 静态资源 #

引用静态资源：

<!-- 在 HTML 或组件中 -->
<img src="/src/assets/logo.svg" />

<!-- 或者在 JS 中 -->
import logo from './assets/logo.svg'

现在您已经掌握了 Vite 的基本使用方法，可以开始构建您的项目了！