首页/ 学科题库/ vite/ 启动开发服务器
vite 实战教程

启动开发服务器

2026-05-23 约 5 分钟 juanwangdev

启动开发服务器

Vite 开发服务器提供极速的开发体验,启动后支持热更新和即时编译。

启动命令

Bash
# 使用 npm
npm run dev

# 或直接调用 vite
vite

# 或使用 npx
npx vite

启动输出

Bash
  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/
  ➜  press h + enter to show help

常用启动选项

JavaScript
# 指定端口
vite --port 3000

# 自动打开浏览器
vite --open

# 暴露网络访问
vite --host

# 组合使用
vite --port 3000 --open --host

配置文件方式

在 vite.config.js 中配置服务器选项:

text
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000,      // 端口
    host: true,      // 暴露网络
    open: true       // 自动打开浏览器
  }
})
选项说明默认值
port服务端口5173
host是否暴露网络false
open自动打开浏览器false
strictPort端口被占用是否报错false

注意:strictPort 为 true 时,端口被占用会报错而非自动切换。

热更新特性

开发服务器启动后,修改源码会自动触发热更新,浏览器即时反映变化,无需手动刷新。

要点总结

  • 默认端口 5173,可配置修改
  • host 选项允许局域网访问
  • open 选项自动打开浏览器
  • 支持热更新,修改即时生效
想在手机上练这篇的配套题目?
使用微信 卷王开发者小程序/App,首页顶部扫一扫识别下方二维码,即可解锁本讲对应真题与错题本。
了解产品 App
← 上一篇 package.json 脚本命令 下一篇 → 自动打开浏览器