# frontend-h5

Vue 3 + Vite H5 small-screen client.

## Project Setup

```sh
npm install
```

## Development

```sh
npm run dev
```

## Build

```sh
npm run build
```

### Build With OSS or Local Assets

```sh
# Use VITE_ASSET_BASE_URL from .env.production
npm run build:oss

# Bundle with local assets and ignore the OSS URL
npm run build:local

# Serve the local build over HTTP
npm run serve:local
```

## Image Assets

Put local development images in `src/assets/images`.

Use the helper below in Vue files:

```ts
import { assetUrl } from '@/commons/assets'

const bg = assetUrl('game1/bg.png')
```

Default behavior:

- development: prefer local files from `src/assets/images`
- production: use `VITE_ASSET_BASE_URL` when configured, otherwise use `/assets/images/...`

For OSS/CDN production builds, create `.env.production`:

```env
VITE_ASSET_BASE_URL=https://xjfcoss.guocai365.org.cn/games/h5/assets/images/
```

If you need to test OSS during development:

```env
VITE_ASSET_DEV_LOCAL=false
VITE_ASSET_BASE_URL=https://xjfcoss.guocai365.org.cn/games/h5/assets/images/
```

H5 resources should be uploaded under `games/h5/assets/images/`. Production image resources are served from `/h5/assets/images/...` when using the local-assets build.
