- 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: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件,补充缺失规范章节
2.5 KiB
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