12451 b553c4e519 feat: API 统一 + 设备详情补全 + H5 导航优化
- API 路由统一: 移除 /api/h5/,统一 /api/pms/ 入口
- 二进制改名: api-server -> pms-api(与服务名一致)
- nginx: 合并 /api/ + /pms/api/ 为 /api/pms/
- 新增 docs/API.md 接口文档
- 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段
- Redis 管道批量读取仓体实时数据(SOC/电压/电流/功率)
- DB: 所有 TIMESTAMP 列改为 DATETIME(修复类型不匹配)
- 用户管理: 新增创建时间/修改时间列,状态改用 Switch
- 角色管理/用户管理: 操作按钮改为图标
- PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址
- PC 卡片: 通道统计改用 Lucide 图标,颜色统一
- PC 二维码: canvas 渲染,含编号文字,支持右键下载
- H5: 按 uni-app 规范修正导航(navigateTo 替代 reLaunch)
- H5: 详情页加返回导航条
- H5: 扫码支持摄像头(jsQR)+ ?id= 参数
- H5: 底部 tabBar 在所有页面常显
- H5: 首页统计改为 6 项(设备/通道/空闲/充电/充满/故障)
- H5: 下拉刷新 / 上拉加载
- 产品首页: 添加业务联系
- 文档: 清理过时文件,补充缺失规范章节
2026-07-04 04:03:02 +08:00

2.5 KiB

name, description
name description
features-assets Static asset handling in Vite including imports, public directory, and URL handling

Static Asset Handling

Importing Assets as URL

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
// Dev: /src/img.png
// Build: /assets/img.2d8efhg.png

Common image, media, and font types are detected automatically.

Import Queries

Explicit URL Import

import workletURL from './worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

Import as String (Raw)

import shaderString from './shader.glsl?raw'

Control Inlining

import imgUrl1 from './img.svg?no-inline'  // Never inline
import imgUrl2 from './img.png?inline'      // Always inline as base64

Asset Inlining

Assets smaller than assetsInlineLimit (default 4KB) are inlined as base64:

export default defineConfig({
  build: {
    assetsInlineLimit: 4096,  // 4KB
    // Or use callback for fine control
    assetsInlineLimit: (filePath) => {
      return !filePath.endsWith('.svg')
    }
  }
})

The public Directory

Files in public/ are:

  • Served at root path / during dev
  • Copied as-is to dist/ root during build
  • Not processed or hashed
public/
  favicon.ico  → /favicon.ico
  robots.txt   → /robots.txt

Reference with absolute paths in source:

<img src="/icon.png" />

Configure directory:

export default defineConfig({
  publicDir: 'static'  // or false to disable
})

Extending Asset Types

export default defineConfig({
  assetsInclude: ['**/*.gltf', '**/*.hdr']
})

Dynamic URLs with import.meta.url

// Works natively in modern browsers
const imgUrl = new URL('./img.png', import.meta.url).href

// Dynamic pattern (limited)
function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

Limitations:

  • URL string must be static for build analysis
  • Does not work with SSR (different semantics in Node.js vs browser)

TypeScript Support

Add vite/client to types for asset import recognition:

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

URL Handling in CSS

.hero {
  background: url('./img.png');  /* Processed and rebased */
}

For dynamically constructed SVG URLs:

import imgUrl from './img.svg'
element.style.background = `url("${imgUrl}")`  // Note double quotes