前端组知识库

👍欢迎大家积极投稿交流👍

如果文档内容陈旧或者链接失效,请发现后及时同步,我将尽快修改

👇微信👇

图片
Skip to content

静态资源配置

src/static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录

如果分包中需要存放静态资源,应在分包目录下创建static目录,其他目录会被uniapp忽略,图片资源建议放置主包static\ignore目录中,可以极大的节省包体积

目录结构及说明

txt
|-- src/static
|  |-- ignore 忽略文件夹,不参与打包,build版使用线上地址
|  |-- tabbar 底部导航图标目录,如果没有可忽略
|  |-- empty  数据为空图片,如果过大,建议放置在ignore目录中

ignore 目录说明

程序中用到大量的图片资源,避免因包过大导致无法上传,建议存放置ignore目录中,开发期间本地可以正常预览,发布正式之前,需要将ignore目录下的静态资源上传到OBS中,然后在 env/.env.production文件中配置 VITE_IMAGE_HOST 环境变量地址

页面使用示例:

vue
<script setup lang="ts">
import { IMAGE_HOST } from '@/config/constant'
</script>

<template>
  <view>
    <image :src="IMAGE_HOST + '/empty/content.png'" />
  </view>
</template>

配置规则在文件 manifest.config.ts,如果需要自定义静态资源路径,可在文件中自行修改配置

兼容性说明

目前ignore规则仅限在微信小程序中,其他平台陆续完善,如果有已经配置好的,可修改模板文件及当前文档。