UNIAPP 技术分享（2）

四、 目录结构

一个uni-app工程，默认包含如下目录及文件：

五、资源路径说明

１）template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径：

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->

<image class="logo" src="/static/logo.png"></image>

<image class="logo" src="@/static/logo.png"></image>

<!-- 相对路径 -->

<image class="logo" src="../../static/logo.png"></image>

注意：

1. @开头的绝对路径以及相对路径会经过base64转换规则校验
2. H5平台小于4kb的资源会被转换成base64，其余平台不转。
3. 支付宝小程序组件内 image 标签不可使用相对路径。

２）js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径：

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录

import add from '@/common/add.js'

// 相对路径

import add from '../../common/add.js'

注意：js文件不支持使用/开头的方式引入

３）css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径：

/* 绝对路径 */

@import url('/common/uni.css');

@import url('@/common/uni.css');

/* 相对路径 */

@import url('../../common/uni.css');

４）css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径：

/* 绝对路径 */

background-image: url(/static/logo.png);

background-image: url(@/static/logo.png);

/* 相对路径 */

　　background-image: url(../../static/logo.png);

注意：

1. 有些小程序端css文件不允许引用本地文件
2. 引入字体图标请参考，字体图标
3. @开头的绝对路径以及相对路径会经过base64转换规则校验
4. 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
5. h5平台，小于4kb会转base64，超出4kb时不转
6. 其余平台不会转base64

来源：oschina

链接：https://my.oschina.net/u/4552122/blog/4539288