diff --git a/docs/frontend-build-deploy.md b/docs/frontend-build-deploy.md new file mode 100644 index 0000000..6a7d753 --- /dev/null +++ b/docs/frontend-build-deploy.md @@ -0,0 +1,68 @@ +# 前端构建与部署规范 + +## 构建输出配置 + +| 配置项 | 值 | 说明 | +|--------|-----|------| +| `base` | `/admin/` | 构建时资源引用路径前缀 | +| `outDir` | `src/CncWebApi/admin` | 构建产物输出目录 | +| `emptyOutDir` | `true` | 允许清空目标目录 | + +## IIS 部署结构 + +``` +E:\opencode\haoliang\src\CncWebApi\ ← IIS站点根目录 +├── admin\ ← 前端构建输出 +│ ├── index.html +│ ├── assets\ +│ ├── favicon.svg +│ └── icons.svg +├── api\ ← 后端API +├── bin\ ← 后端DLL +└── ...other backend files... +``` + +## 资源路径映射 + +- 浏览器访问 `/admin/login` → IIS物理路径 `E:\opencode\haoliang\src\CncWebApi\admin\index.html` +- 前端资源引用 `/admin/assets/xxx.js` → IIS物理路径 `E:\opencode\haoliang\src\CncWebApi\admin\assets\xxx.js` + +## 构建命令 + +```bash +cd frontend +npm run build +``` + +## 部署检查清单 + +1. ✅ `vite.config.ts` 的 `base` 必须为 `/admin/` +2. ✅ `vite.config.ts` 的 `outDir` 必须指向 `src/CncWebApi/admin` +3. ✅ IIS 站点物理路径必须为 `E:\opencode\haoliang\src\CncWebApi` +4. ✅ 构建后 `src/CncWebApi/admin/index.html` 存在 +5. ✅ 构建后 `src/CncWebApi/admin/assets/` 目录存在 + +## 常见问题 + +### 资源404 +- 症状:页面能加载,但 JS/CSS 返回 404 +- 原因:`base` 配置与 IIS 物理路径不匹配 +- 检查:浏览器 DevTools Network 面板,JS 引用路径是否为 `/admin/assets/xxx.js` + +### 页面404 +- 症状:首页能加载,但路由(如 `/admin/dashboard`)返回 404 +- 原因:IIS 缺少 URL Rewrite 规则,需配置通配符路由 fallback +- 检查:`src/CncWebApi/Web.config` 是否存在且配置正确 + +## vite.config.ts 参考配置 + +```typescript +export default defineConfig(({ command }) => ({ + // build时部署到/admin/子路径,dev时用根路径 + base: command === 'build' ? '/admin/' : '/', + build: { + outDir: path.resolve(__dirname, '../src/CncWebApi/admin'), + emptyOutDir: true, + }, +})) +``` \ No newline at end of file