华为云AI开发者空间实战：Vite项目启动成功但网页预览打不开的排查与解决

背景描述
最近在华为云 AI 开发者空间中尝试开发一个基于 Node.js + Vite 的前端项目。代码写完后，在终端执行 npm run dev，终端显示服务已经启动且没有报错。但是在空间里点击“网页预览”时，页面一直加载不出来，有时还提示连接失败。作为初学者，记录一下这次的排查过程。

问题分析
通过查看终端日志，我注意到 Vite 默认显示的地址是 localhost:5173。在本地电脑开发时，这个地址没问题，但在云端开发空间里，网页预览往往是通过平台的网关或反向代理来访问容器内部服务的。如果服务仅仅监听在 localhost（即 127.0.0.1），外部代理无法访问，就会导致连接失败。

排查与解决步骤

步骤一：修改 Vite 配置，监听 0.0.0.0
这是最关键的一步。我们需要让 Vite 监听所有网络接口。打开 vite.config.js，修改 server 配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: '0.0.0.0', // 关键：允许外部访问
    port: 5173,      // 固定端口
    strictPort: true // 端口被占用时报错，而不是自动换端口
  }
})

或者在启动时直接加上参数：npm run dev -- --host 0.0.0.0。

步骤二：警惕 Vite 自动切换端口
Vite 默认在 5173 端口被占用时，会自动切换到 5174、5175 等端口，但云端空间的网页预览可能只映射了 5173 端口。这就是为什么终端提示成功，但预览打不开的原因。配置 strictPort: true 可以避免这个坑，如果报错就说明端口被占用了。

步骤三：排查端口占用情况
如果确认端口被占用，可以在终端执行：
lsof -i:5173 或 netstat -tulpn | grep 5173
找到对应进程 PID 后，使用 kill -9 <PID> 杀掉进程，重新启动即可。

总结
在云端开发环境中，本地终端的“启动成功”并不等于“外网可访问”。需要确保服务监听在 0.0.0.0，并留意端口映射规则。问题解决后，预览终于能正常打开了！