vite项目搭建-CFANZ编程社区

搭建 Vite 项目非常简单，以下是详细的步骤指南，涵盖环境准备、项目初始化、开发调试、生产构建及常见配置等环节。

一、环境准备

Vite 基于 Node.js 开发，需先安装 Node.js（≥14.18 或 ≥16）。
• 检查 Node.js 版本：终端运行 node -v 和 npm -v（或 yarn -v/pnpm -v）。

• 若未安装，从 https://nodejs.org/ 下载 LTS 版本（推荐）。

二、初始化 Vite 项目

Vite 提供官方脚手架工具 create-vite，支持快速生成项目模板。

运行创建命令

根据使用的包管理器（npm/yarn/pnpm）执行以下命令：

npm

npm create vite@latest 你的项目名称 -- --template <框架模板>

yarn

yarn create vite 你的项目名称 --template <框架模板>

pnpm

pnpm create vite 你的项目名称 --template <框架模板>

选择框架模板

根据需求选择前端框架（模板名称参考）：
• Vue：vue（Vue 3）或 vue-ts（Vue 3 + TypeScript）

• React：react（React 18）或 react-ts（React 18 + TypeScript）

• Preact：preact 或 preact-ts

• Svelte：svelte 或 svelte-ts

• Vanilla JS/TS：vanilla 或 vanilla-ts（无框架纯静态项目）

示例（创建 Vue 3 项目）：
npm create vite@latest my-vue-app -- --template vue

cd my-vue-app

根据包管理器安装依赖

npm install # 或 yarn 或 pnpm install

三、启动开发服务器

Vite 内置开发服务器，支持 HMR（热模块替换），启动命令：
npm run dev # 或 yarn dev / pnpm dev

终端会输出访问地址（默认 http://localhost:5173），浏览器打开即可实时预览。

四、生产环境构建

打包生产版本（优化后的静态资源）：
npm run build # 输出到 dist 目录

预览生产构建结果

本地启动一个静态服务器预览打包后的文件：
npm run preview # 或 yarn preview / pnpm preview

五、核心配置（vite.config.js）

Vite 的配置文件为根目录下的 vite.config.js（或 .ts），支持灵活扩展。

示例配置：

import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // Vue 项目已自动引入，其他框架类似 import path from 'path';

export default defineConfig({ // 基础路径（部署时使用，如 CDN 地址） base: '/my-project/',

// 插件列表 plugins: [vue()],

// 解析别名（简化导入路径） resolve: { alias: { '@': path.resolve(__dirname, './src'), // 将 @ 指向 src 目录 }, },

// 开发服务器配置 server: { port: 8080, // 自定义端口 open: true, // 启动时自动打开浏览器 proxy: { // 代理请求（解决跨域） '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, },

// 生产构建配置 build: { outDir: 'dist', // 输出目录（默认） assetsDir: 'assets', // 静态资源目录（默认） minify: 'terser', // 压缩工具（默认） }, });

六、常见问题与扩展