5173.md
root@localhost:~# cat 5173.md

Localhost:5173 Vite开发端口

# 定义

Vite团队选择端口5173作为默认开发服务器端口。数字5173在电话键盘上拼写为"site"（5=S, 1=I, 7=T, 3=E），使其易于记忆且在主题上适合Web开发工具。Vite凭借其极快的冷启动时间和高效的热模块替换革命性地改变了前端开发，使端口5173在现代Web开发工作流程中越来越常见。

# Services and Software That Use Port 5173

## 构建工具

• Vite
下一代前端构建工具，默认使用端口5173作为开发服务器，具有即时服务器启动和闪电般快速的HMR。
• Vite + Vue
使用Vite创建的Vue.js项目自动使用端口5173作为开发服务器。
• Vite + React
使用Vite作为构建工具的React应用程序在端口5173上运行开发服务器。
• Vite + Svelte
使用Vite构建配置的Svelte项目使用端口5173进行本地开发。

## 前端框架

• Vue 3 Applications
现代Vue.js应用程序通常使用Vite作为构建工具，运行在端口5173上。
• React + TypeScript
使用Vite获得更快开发体验的React TypeScript应用程序。
• Svelte Kit
SvelteKit应用程序可以配置为在端口5173上使用Vite。
• Vanilla JavaScript
使用Vite进行现代开发工具的纯JavaScript项目。

## 开发工具

• Vite Dev Server
提供即时服务器启动和热模块替换的Vite开发服务器。
• Vite Plugins
扩展Vite功能的插件生态系统，全部在端口5173上运行。

# Frequently Asked Questions

Q: 如何访问localhost:5173？

A:

运行"npm run dev"启动Vite开发服务器，然后在浏览器中访问http://localhost:5173。Vite通常会自动打开浏览器。

Q: 为什么Vite使用端口5173？

A:

端口5173在电话键盘上拼写为"site"(5=S, 1=I, 7=T, 3=E)，这对Web开发工具来说是一个聪明且易记的选择。

Q: Vite比webpack快多少？

A:

Vite通常比webpack快10-100倍，特别是在冷启动时。它使用原生ES模块和esbuild预构建来实现这种速度。

Q: 如何更改Vite的默认端口？

A:

使用"npm run dev -- --port 3000"或在vite.config.js中设置server.port: 3000。

Q: Vite可以用于生产环境吗？

A:

是的，Vite提供优化的生产构建。使用"npm run build"构建，然后"npm run preview"在端口4173上预览。

Q: Vite的热重载有多快？

A:

Vite的HMR通常在50ms内完成，无论应用程序大小如何，因为它只更新更改的模块。

Q: Vite支持哪些框架？

A:

Vite支持Vue、React、Svelte、Lit、Vanilla JavaScript/TypeScript等，并有丰富的插件生态系统。

Q: 如何在Vite中启用HTTPS？

A:

使用"npm run dev -- --https"或在vite.config.js中设置server.https: true。

# How to Use Port 5173

1.

创建Vite项目

使用Vite CLI创建新项目。选择您首选的框架(Vue、React、Svelte等)和变体。

bash
npm create vite@latest my-app
2.

安装依赖项

导航到项目目录并安装项目依赖项。

bash
cd my-app && npm install
3.

启动开发服务器

启动Vite开发服务器。它将自动在端口5173上启动并打开您的浏览器。

bash
npm run dev
4.

访问应用程序

在浏览器中打开http://localhost:5173查看您的应用程序。Vite提供即时热重载。

bash
curl http://localhost:5173
5.

配置自定义端口

如果需要不同的端口，可以在vite.config.js中配置或使用命令行参数。

bash
npm run dev -- --port 3000

# Common Problems

## LOW Severity Issues

⚠ 端口5173已被占用

另一个应用程序正在使用端口5173。Vite会自动尝试下一个可用端口(5174, 5175等)。

⚠ Vite开发服务器启动缓慢

首次启动可能因依赖项预构建而较慢。后续启动应该非常快。

## MEDIUM Severity Issues

⚠ 热模块替换不工作

文件更改没有自动反映。检查文件监视器限制和防病毒软件干扰。

⚠ 无法从网络访问

Vite默认只绑定到localhost。要启用网络访问，需要配置主机设置。

## HIGH Severity Issues

⚠ 导入模块错误

ES模块导入问题，通常与文件扩展名或路径解析相关。

# Troubleshooting Solutions

## All Platform

解决端口冲突

For: 端口5173已被占用

Steps:

  1. 让Vite自动选择下一个可用端口
  2. 或者手动指定不同的端口
  3. 或者终止占用端口5173的进程
all
npm run dev -- --port 3000

启用网络访问

For: 无法从网络访问

Steps:

  1. 配置Vite绑定到所有接口
  2. 或在vite.config.js中设置server.host
  3. 确保防火墙允许端口5173
all
npm run dev -- --host 0.0.0.0

启用网络访问

For: 无法从网络访问

Steps:

  1. 配置Vite绑定到所有接口
  2. 或在vite.config.js中设置server.host
  3. 确保防火墙允许端口5173
all
npm run dev -- --host

## Linux/macOS Platform

解决端口冲突

For: 端口5173已被占用

Steps:

  1. 让Vite自动选择下一个可用端口
  2. 或者手动指定不同的端口
  3. 或者终止占用端口5173的进程
linux/macos
lsof -ti:5173 | xargs kill -9

## Windows Platform

解决端口冲突

For: 端口5173已被占用

Steps:

  1. 让Vite自动选择下一个可用端口
  2. 或者手动指定不同的端口
  3. 或者终止占用端口5173的进程
windows
netstat -ano | findstr :5173

# 总结

root@localhost:~# echo "Port 5173 Documentation Complete"

它是什么： localhost:5173 是Localhost:5173是Vite的默认开发端口，Vite是用于现代Web项目的快速构建工具和开发服务器。Vite提供闪电般快速的热模块替换，通常与Vue、React、Svelte和其他前端框架一起使用，以获得优化的开发体验。

谁在使用： Vite, Vite + Vue, Vite + React, Vite + Svelte, Vue 3 Applications, React + TypeScript, Svelte Kit, Vanilla JavaScript, Vite Dev Server, Vite Plugins

访问地址： http://localhost:5173