vite 打包后无法在浏览器中预览

[TOC]

## 错误信息

使用vite打包后，使用vite preview 命令得到地址后，在浏览器中打开报下面的错误

![](/UploadFlie/MarkdownImg/20260424/202604240202557909.png)

> Tips：使用`npx serve dist -p 5000` 可以正常访问，说明 `npm run build:test` 打包后的产物是**完全正确**的。问题明确出在 `vite preview` 命令的使用上。

**其它配置参考**

+ package.json 文件
```json
{
  "name": "base",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.24",
    "vue-router": "^4.6.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.2.4"
  }
}
```

+ vite.config.js 文件
```json
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@components":
        path.resolve(__dirname, "src", "components"),
        "@study":
        path.resolve(__dirname, "src", "components", "study")
    }
  }
})
```

## 原因分析

根本原因：访问的端口号不对

`vite preview` 命令默认启动的预览服务器端口是 **`4173`**，而不是 `5173`（`5173` 是 `vite` 开发服务器的默认端口）。

你在浏览器中打开了 `http://localhost:5173/`，而这个端口上并没有任何服务在运行（或者运行的是之前残留的开发服务器），所以报 `404`。

## ✅ 解决办法（二选一）

#### 方法一：使用正确的默认端口（推荐）

1. **重新运行预览命令**（确保没有其他终端进程占用）：
```bash
npm run preview
```
或者直接：
```bash
npx vite preview
```

2. **仔细观察终端输出的地址**，它会明确显示：
```
➜  Local:   http://localhost:4173/
➜  Network: http://192.168.x.x:4173/
```

3. **复制终端显示的 `Local` 地址**（通常是 `http://localhost:4173/`）到浏览器中访问，就能正常看到页面了。

#### 方法二：在配置中固定端口为 5173（如果你习惯用 5173）

修改 `vite.config.js`，添加 `preview` 配置项：

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "src", "components"),
      "@study": path.resolve(__dirname, "src", "components", "study")
    }
  },
  // 添加预览服务器的配置
  preview: {
    port: 5173,      // 使用你期望的端口
    strictPort: true // 如果端口被占用则报错，避免意外
  }
})
```

然后重新运行 `npm run preview`，就可以通过 `http://localhost:5173/` 访问了。

### 🧹 如果问题依旧存在，可以尝试：

1. **彻底停止所有 Node 进程**：关闭所有终端窗口，或运行 `npx kill-port 4173`（如果安装了 `kill-port`）来释放端口。
2. **清理浏览器缓存**：特别是针对 `localhost` 的缓存和 Service Worker。
3. **确认 `dist` 目录存在**：运行 `ls dist`（Mac/Linux）或 `dir dist`（Windows），确保里面有 `index.html` 文件。