资源路径说明

1. 前言

在uni-app 项目开发的过程中，经常需要引入各类外部文件，比如我们程序开发用到的图片、文件等，这些外部文件会被我们放在根目录下面的 static文件夹中，或者 src目录下的 static 文件夹中。

将这些外部文件应用到我们的项目中，就需要使用路径引入，看起来简单，但实际操作有很多需要注意的地方。本小节我们来学习在各种场景下面如何引用这些外部文件以及需要注意的一些问题。

2. 模板内引入静态资源

在 <template> 标签内引入静态资源，可以用相对路径和绝对路径引入。比如用 <image> 标签的 src 属性引入图片，或者使用<video> 标签的 src 属性引入视频。我们来分别演示一下。

2.1 绝对路径

实例：

<template>
  <view>
    <!-- /static是指根目录下的static目录 -->
    <image src="/static/imooc.png"></image>
  
    <!-- 在cli项目中，/static指的是src目录下的static目录，路径前面需要再加一个@ -->
    <image src="@/static/imooc.png"></image>
  </view>
</template>

2.2 相对路径

使用相对路径可能会出现路径查找失败的情况，并且在支付宝小程序组件内 <image> 标签不可以使用相对路径。所以我们日常开发过程中，尽量使用绝对路径，避免不必要的错误。
实例：

<image src="../../static/imooc.png"></image>

需要注意以下几点：

• @开头的绝对路径以及相对路径会经过base64转换规则校验
   引入的静态资源在非h5平台，均不转为base64。
   H5平台，小于4kb的资源会被转换成base64，其余不转。
   自HBuilderX 2.6.6-alpha起template内支持@开头路径引入静态资源，旧版本不支持此方式。

3. js 文件引入

日常开发过程中，我们经常会在js文件中或者在 .vue 文件中的 <script> 标签内引入第三方js插件。可以使用相对路径和绝对路径引入。

3.1 绝对路径

应用 js 文件，直接使用 / 开头的路径，会报“文件查找失败”的错误，需要使用 @开头的路径。@开头的路径，指向的是项目的根目录。

实例：

<script>
  //正确实例
  import config from '@/common/config.js'
  
  //错误实例
  import config from '/common/config.js'
  
  export default {
  }
</script>

3.2 相对路径

实例：

import config from '../../common/config.js'

3.3 调用 js 插件方法

实例：

// config.js插件内容
const host = 'http://imooc.com'
export default host

// 引入插件并调用
<script>
import host from '../../common/config.js';
export default {
onLoad() {
console.log(‘打印出js插件的内容’,host)
}
	}
</script>

打印结果：http://imooc.com
调用插件的时候，明明文件已经成功引入了，却不会成功打印出js插件中的内容。这个时候可以检查一下是否在js插件中使用 export 将变量暴露出去了。

因为js插件是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出，不然将会读取失败。

4. css 引入静态资源

4.1 引入 css 文件

在 css 文件中或者 <style> 标签内引入 css 文件时，可以使用相对路径或者绝对路径。引入 scss、less 文件也是一样的。

需要注意的是，只有 HBuilderX 2.6.6-alpha 版本开始才支持绝对路径，旧版本不支持。

我们使用 @import 语句引入 css 文件，用;表示语句结束。
实例：

<style>
    /* 相对路径 */
    @import "../../common/imooc.css";
 
    /* 绝对路径，旧版本不支持 */
    @import url('/common/imooc.css');
    @import url('@/common/imooc.css');
</style>

4.2 引入本地图片

在 css 中引入本地文件（比如图片、字体）也可以使用相对路径和绝对路径。

需要注意的是，有些小程序端 css 文件不允许引用本地文件，这些平台包括微信小程序、QQ小程序、字节跳动小程序、App v2。

（1）绝对路径
实例：

<style>
    /* 引入图片 */
    .imooc-banner {
        background-image: url(/static/logo.png);
        background-image: url(@/static/logo.png);
    }
</style>

4.3 引入字体文件

字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。如果字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式，如果字体文件大于等于 40kb， 需要自己转换为 base64 格式，否则将不会生效。

<style>
    /* 引入字体文件 */
    .font { 
        font-family: test-icon; 
        src: url('~@/static/iconfont.ttf');
    }
</style>

需要注意以下几点：

• @开头的绝对路径以及相对路径会经过 base64 转换规则校验；
• 不支持引用本地图片的平台，小于 40kb，一定会转换为 base64 格式；
• h5 平台，图片文件小于 4kb 会转 base64，超出 4kb 时不转；
• 图片文件在其余平台不会转 base64。

（2）相对路径
实例：

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

5. 小结

项目开发过程中，除了自身的代码之外，对于外部资源的引用也是不可或缺的，所以需要熟练掌握在各种情况下，引入外部资源的方式。

本节课程我们主要学习了 uni-app 的资源路径。本节课程的重点如下：

• 了解并掌握在模板内引入静态资源；

• 了解并掌握 js文件的引入，以及调用 js 插件的方法；

• 了解并掌握 css 文件的引入，了解 css 中各类本地文件的引入。