vite 提供零配置、毫秒级冷启动的开发服务器,支持 hmr、按需编译与依赖预构建;通过官方脚手架初始化,配置 proxy、端口等仅需修改 vite.config.js,环境变量须以 vite_ 开头。

直接运行 npm run dev 就能启动一个开箱即用的开发服务器——Vite 的核心优势就在于“零配置启动”,无需打包、不预编译整个项目,靠浏览器原生 ES 模块支持,毫秒级冷启动。
初始化项目并添加脚本
推荐用官方脚手架一键创建,自动配好所有基础结构和命令:
- 执行
npm create vite@latest my-app -- --template react(或vue/vanilla) - 进入目录:
cd my-app - 安装依赖:
npm install - 确认
package.json中已有脚本:"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }
启动即用,无需额外配置
Vite 默认监听 localhost:5173,运行 npm run dev 后会自动打开浏览器。它默认已启用:
- 热模块替换(HMR):改一行 JSX 或 Vue 组件,页面局部刷新,状态不丢失
- 按需编译:只处理当前浏览器请求的模块,不是全量构建
- 依赖预构建:首次启动时用 esbuild 快速转译 node_modules 中的 CommonJS 包
按需微调开发服务器行为
如需修改端口、自动打开、代理等,只需在 vite.config.js 中加几行:
- 换端口并自动打开:
server: { port: 3000, open: true } - 解决跨域问题(例如本地调后端 API):
proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } - 允许局域网访问(方便手机调试):
host: '0.0.0.0'
环境变量与入口文件准备
确保项目根目录有 index.html,且其中包含模块入口引用:
- 例如:
<script type="module" src="/src/main.jsx"></script> - 环境变量以
VITE_开头才可在代码中读取,如.env.development中写VITE_API_URL=/mock,然后在 JS 中用import.meta.env.VITE_API_URL
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











