实战：与框架集成、Dev Server 代理与部署

本节目标

接入框架只需装对应官方插件：

# Vue 项目
# npm i -D @vitejs/plugin-vue
# React 项目
# npm i -D @vitejs/plugin-react
// Vue 的 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // 让 Vite 认识 .vue 单文件组件
})
// React 的 vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()], // 支持 JSX + Fast Refresh
})

开发跨域：前端 fetch('/api/users') 要打到后端 http://localhost:8080，用 server.proxy 转发，免配 CORS：

export default defineConfig({
  server: {
    port: 5173,
    proxy: {
      // 以 /api 开头的请求，转发到后端 8080
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        // 若后端路径不带 /api 前缀，可重写掉
        // rewrite: (p) => p.replace(/^\/api/, ''),
      },
    },
  },
})

部署：npm run build 后 dist/ 是一份纯静态资源（HTML/CSS/JS），可托管到任意静态服务器（Nginx、Cloudflare Pages、GitHub Pages、对象存储…）。SPA 路由记得配「兜底回退到 index.html」：

// 若用 Vite 自身的 preview 或某些平台，SPA fallback 通常已内置
// Nginx 示例：
// location / { try_files $uri $uri/ /index.html; }

注意 base 配置要和部署路径一致（挂在子目录时设为对应前缀）。

名词解释

官方插件（@vitejs/plugin-*）：Vite 团队维护的框架集成插件，plugin-vue 支持 .vue 单文件组件，plugin-react 支持 JSX 与 Fast Refresh。

server.proxy：开发服务器的请求代理配置，把特定前缀的请求转发到真实后端，开发期绕过浏览器跨域限制。

SPA 兜底（Fallback）：对于前端路由（如 /user/123），刷新时服务器要把未知路径回退到 index.html，否则 404。静态托管需显式配置。

静态托管：把 dist/ 当作普通静态文件提供服务的部署方式，Vite 产物天然适配任意静态服务器/CDN。

课后练习

练习 1：开发时 server.proxy 转发 /api，为什么不用在代码里写完整后端地址？

答案：因为浏览器请求的是同源的 /api/...，由 Vite dev server 在本地把它「代理」到 target 后端。对前端代码而言请求仍是同源，天然没有跨域；生产环境则由真正的反向代理（Nginx 等）承担同样的转发。

练习 2：Vite 的 dist/ 和 Webpack 的 dist/ 在部署上有区别吗？

答案：没有本质区别，都是「纯静态资源目录」，可托管到任意静态服务器。区别只在「构建工具与产物优化手段」不同，部署侧完全一致。

总结

Vite 实战的三件事——官方插件接入框架、server.proxy 解开发跨域、dist/ 纯静态托管 + SPA 兜底。它把「开发爽」和「部署简」都做到了极致：配置少、心智负担小。到这里，你从「为什么快」走到「手写插件 + 生产优化 + 框架集成」，Vite 主干已打通。建议挑一个小项目（比如 Vue/React 的 todo）把 8 节串起来跑一遍，体会它和 Webpack 在工作流上的差异。