引言
每次跑项目，npm run dev 后浏览器却报
跨域、
热更新失效，又或者
端口被占用？这些痛我踩过，今天用一篇实战把「本地开发服务器vite配置」讲透，让新手也能三分钟起服务，十分钟调通透。
为什么要用 Vite？
Q：Webpack 也能跑本地，为啥换 Vite？
A：冷启动快 10 倍，热更新毫秒级，还自带
跨域代理 与
环境变量 注入，省掉一堆插件。
一分钟搭好 vite.config.js
| 步骤 | 指令 | 备注 |
|---|
| 1 | npm create vite@latest my-app | 选 vanilla-ts 模板 |
| 2 | cd my-app && npm i | 安装依赖 |
| 3 | touch vite.config.ts | 创建配置文件 |
三行代码解决
跨域 export default defineConfig({server: {proxy: {'/api': {target: 'http://backend.test',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}})
保存后重启，前端
/api/user 直接打到后端，
零 代码改动。
端口被占用？
在
server.port 里写死，或加
strictPort: false 自动换端口。
server: { port: 5173, strictPort: false }
热更新失效排查表
| 现象 | 可能原因 | 修复 |
|---|
| 保存无反应 | 路径含中文 | 改英文目录 |
| 全页刷新 | 引入 commonjs 包 | 用 @originjs/vite-plugin-commonjs |
| 样式丢失 | 引用了 .scss 却没装 sass | npm i -D sass |
环境变量这样拆
根目录新建
.env.development.env.production
内容示例
VITE_API_BASE=/apiVITE_TITLE=MyApp
组件里直接
import.meta.env.VITE_TITLE 调用，
无需 再写 definePlugin。
性能小彩蛋
vite 自带
动态 import 预加载，路由懒加载无需配置；再配
build.rollupOptions.output.manualChunks 把第三方库打 vendor，首包瞬间瘦身 30%。
结尾
把 vite.config.ts 拷进任何新项目，三分钟就能跑起
本地开发服务器，跨域、端口、热更新一次配好，长期复用。祝你开发愉快，少踩坑，多摸鱼。
