---
title: "项目结构与离线运行"
description: "配置 React/Vite 入口、静态资源、路由、浏览器调试和页面生命周期。"
---

> Documentation Index
> Fetch the complete documentation index at: https://h5-app-docs.glass.tengyusmart.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 项目结构与离线运行

| 模板文件 | 用途 |
| --- | --- |
| `app.json` | 应用身份、能力、权限、运行要求和数据版本。 |
| `index.html` 和 `src/main.tsx` | Vite 入口与 React 根组件。 |
| `metadata/icon.png` | Host 应用列表图标。 |
| `vite.config.ts` | 保留相对资源基址 `./` 和目标 WebView 对应的构建版本。 |
| `dist/` | 由构建生成，打包从这里收集静态资源。 |

## 资源与路由

把脚本、样式、字体和图片放进构建产物。用相对路径引用资源，用 hash 路由处理应用内页面，例如 `#/tasks`。Host 只加载当前应用签名包内的资源与受管媒体。将 CDN 字体、远程脚本和框架运行时改为构建时依赖。远程业务数据走 [受管联网](https://h5-app-docs.glass.tengyusmart.cn/reference/network/)，媒体通过文件 API 访问。

生产 WebView 禁止页面直接联网、远程脚本、iframe、Worker 和内联脚本。打包也会拒绝源码映射以及不支持的资源后缀，例如独立 SVG。浏览器开发时能运行的写法，还应在签名包和目标 Host 上验证。

## 开发与调试

`npm run dev` 启动 Vite。普通浏览器使用 [开发模拟](https://h5-app-docs.glass.tengyusmart.cn/reference/bridge/#development-mock) 调试页面状态，设备上使用 Host 提供的 Bridge。模拟存储、拍照和测试 HTTP 响应适合覆盖页面分支，真实权限、连接、设备回调和渲染以真机为准。

`npm run build` 生成产物。打包前检查 `dist/index.html`、资源加载路径和包体积。开发模拟放在开发条件分支，避免随生产产物交付。

## 生命周期

页面启动先握手，再读数据和能力。组件订阅输入或原生事件时，在卸载时释放监听。收到后台事件后停止发起新的前台任务，回到前台时重新读取必要状态。重载会生成新的 Bridge 上下文。恢复应用时从存储读取未完成的业务意图，用原操作 ID 查询，详见 [持久操作](https://h5-app-docs.glass.tengyusmart.cn/reference/operations/)。

Source: https://h5-app-docs.glass.tengyusmart.cn/guide/project/index.mdx