250706-在局域网中搭建 SvelteKit 项目并允许其他设备访问

本文记录了如何从零开始创建一个 SvelteKit 项目，并配置使得局域网内的其它设备可以访问开发服务器（如用于移动设备调试）。

一、准备开发环境

1. 安装 Node.js 和 npm

Svelte 项目依赖 Node.js（建议版本 ≥ 16）。

# macOS 安装方式
brew install node

# 或者官网下载：https://nodejs.org/

验证是否安装成功：

node -v
npm -v

---

二、创建 SvelteKit 项目

Svelte 团队推荐使用新的工具包 sv 来代替旧的 create-svelte。

1. 安装 sv（推荐全局安装）

npm install -g sv

2. 创建项目

npx sv create my-svelte-app
cd my-svelte-app

按照提示选择模板（如 Skeleton project）及是否启用 TypeScript、ESLint 等工具。

3. 安装依赖

npm install

---

三、运行开发服务器并支持局域网访问

默认情况下，SvelteKit 的 npm run dev 绑定的是 localhost，其它设备无法访问。我们需要修改为监听 0.0.0.0。

1. 临时启动命令（可选）

npm run dev -- --host

或者

npm run dev -- --host 192.168.1.100

192.168.1.100 是你当前主机的局域网 IP 地址，可用 ip a 或 ifconfig 查看。

2. 推荐方式：修改 vite.config.ts

项目创建后，根目录会有一个 vite.config.ts 文件。如果你看到如下两个 export default，请删掉其中一个，保留 SvelteKit 配置。

错误示例（会报错）：

export default defineConfig({
  plugins: [sveltekit()]
});

export default defineConfig({  // ❌ 不能有两个 export default
  plugins: [svelte()],
  server: {
    host: '0.0.0.0',
    port: 5173
  }
});

正确示例：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    host: '0.0.0.0', // 允许局域网访问
    port: 5173       // 可自定义端口
  }
});

保存并重新启动开发服务器：

npm run dev

你将看到终端提示：

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/

---

四、在其它局域网设备访问

确保你电脑和其它设备在同一 Wi-Fi / 局域网下，在其它设备浏览器中访问：

http://192.168.1.100:5173

即可访问开发页面。

---

五、常见问题排查

Q1: 其他设备访问不了？

• 检查本机防火墙是否开放 5173 端口。

  sudo ufw allow 5173       # Ubuntu / Debian
  sudo firewall-cmd --add-port=5173/tcp --permanent && sudo firewall-cmd --reload  # RHEL / CentOS
  

Q2: 如何获取当前局域网 IP？

ip a           # Linux
ifconfig       # macOS
ipconfig       # Windows

---

✅ 总结

通过修改 vite.config.ts 中的 server.host 配置，并确保你的开发设备在局域网中，就可以轻松实现在手机、平板或其他电脑上访问你的 SvelteKit 项目，方便调试响应式布局、移动端体验等。

• Introduction • Docs • Svelte
• Reactivity / State • Svelte Tutorial