資源路徑說(shuō)明

1. 前言

在uni-app 項(xiàng)目開(kāi)發(fā)的過(guò)程中，經(jīng)常需要引入各類外部文件，比如我們程序開(kāi)發(fā)用到的圖片、文件等，這些外部文件會(huì)被我們放在根目錄下面的 static文件夾中，或者 src目錄下的 static 文件夾中。

將這些外部文件應(yīng)用到我們的項(xiàng)目中，就需要使用路徑引入，看起來(lái)簡(jiǎn)單，但實(shí)際操作有很多需要注意的地方。本小節(jié)我們來(lái)學(xué)習(xí)在各種場(chǎng)景下面如何引用這些外部文件以及需要注意的一些問(wèn)題。

2. 模板內(nèi)引入靜態(tài)資源

在 <template> 標(biāo)簽內(nèi)引入靜態(tài)資源，可以用相對(duì)路徑和絕對(duì)路徑引入。比如用 <image> 標(biāo)簽的 src 屬性引入圖片，或者使用<video> 標(biāo)簽的 src 屬性引入視頻。我們來(lái)分別演示一下。

2.1 絕對(duì)路徑

實(shí)例：

<template>
  <view>
    <!-- /static是指根目錄下的static目錄 -->
    <image src="/static/imooc.png"></image>
  
    <!-- 在cli項(xiàng)目中，/static指的是src目錄下的static目錄，路徑前面需要再加一個(gè)@ -->
    <image src="@/static/imooc.png"></image>
  </view>
</template>

2.2 相對(duì)路徑

使用相對(duì)路徑可能會(huì)出現(xiàn)路徑查找失敗的情況，并且在支付寶小程序組件內(nèi) <image> 標(biāo)簽不可以使用相對(duì)路徑。所以我們?nèi)粘ｉ_(kāi)發(fā)過(guò)程中，盡量使用絕對(duì)路徑，避免不必要的錯(cuò)誤。
實(shí)例：

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

需要注意以下幾點(diǎn)：

• @開(kāi)頭的絕對(duì)路徑以及相對(duì)路徑會(huì)經(jīng)過(guò)base64轉(zhuǎn)換規(guī)則校驗(yàn)
  ? 引入的靜態(tài)資源在非h5平臺(tái)，均不轉(zhuǎn)為base64。
  ? H5平臺(tái)，小于4kb的資源會(huì)被轉(zhuǎn)換成base64，其余不轉(zhuǎn)。
  ? 自HBuilderX 2.6.6-alpha起template內(nèi)支持@開(kāi)頭路徑引入靜態(tài)資源，舊版本不支持此方式。

3. js 文件引入

日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)在js文件中或者在 .vue 文件中的 <script> 標(biāo)簽內(nèi)引入第三方j(luò)s插件?？梢允褂孟鄬?duì)路徑和絕對(duì)路徑引入。

3.1 絕對(duì)路徑

應(yīng)用 js 文件，直接使用 / 開(kāi)頭的路徑，會(huì)報(bào)“文件查找失敗”的錯(cuò)誤，需要使用 @開(kāi)頭的路徑。@開(kāi)頭的路徑，指向的是項(xiàng)目的根目錄。

實(shí)例：

<script>
  //正確實(shí)例
  import config from '@/common/config.js'
  
  //錯(cuò)誤實(shí)例
  import config from '/common/config.js'
  
  export default {
  }
</script>

3.2 相對(duì)路徑

實(shí)例：

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

3.3 調(diào)用 js 插件方法

實(shí)例：

// config.js插件內(nèi)容
const host = 'http://imooc.com'
export default host

// 引入插件并調(diào)用
<script>
import host from '../../common/config.js';
export default {
onLoad() {
console.log(‘打印出js插件的內(nèi)容’,host)
}
	}
</script>

打印結(jié)果：http://imooc.com
調(diào)用插件的時(shí)候，明明文件已經(jīng)成功引入了，卻不會(huì)成功打印出js插件中的內(nèi)容。這個(gè)時(shí)候可以檢查一下是否在js插件中使用 export 將變量暴露出去了。

因?yàn)閖s插件是獨(dú)立的文件，該文件內(nèi)部的所有的變量外部都無(wú)法獲取。如果希望獲取某個(gè)變量，必須通過(guò)export輸出，不然將會(huì)讀取失敗。

4. css 引入靜態(tài)資源

4.1 引入 css 文件

在 css 文件中或者 <style> 標(biāo)簽內(nèi)引入 css 文件時(shí)，可以使用相對(duì)路徑或者絕對(duì)路徑。引入 scss、less 文件也是一樣的。

需要注意的是，只有 HBuilderX 2.6.6-alpha 版本開(kāi)始才支持絕對(duì)路徑，舊版本不支持。

我們使用 @import 語(yǔ)句引入 css 文件，用;表示語(yǔ)句結(jié)束。
實(shí)例：

<style>
    /* 相對(duì)路徑 */
    @import "../../common/imooc.css";
 
    /* 絕對(duì)路徑，舊版本不支持 */
    @import url('/common/imooc.css');
    @import url('@/common/imooc.css');
</style>

4.2 引入本地圖片

在 css 中引入本地文件（比如圖片、字體）也可以使用相對(duì)路徑和絕對(duì)路徑。

需要注意的是，有些小程序端 css 文件不允許引用本地文件，這些平臺(tái)包括微信小程序、QQ小程序、字節(jié)跳動(dòng)小程序、App v2。

（1）絕對(duì)路徑
實(shí)例：

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

4.3 引入字體文件

字體文件的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑。如果字體文件小于 40kb，uni-app 會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式，如果字體文件大于等于 40kb， 需要自己轉(zhuǎn)換為 base64 格式，否則將不會(huì)生效。

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

需要注意以下幾點(diǎn)：

• @開(kāi)頭的絕對(duì)路徑以及相對(duì)路徑會(huì)經(jīng)過(guò) base64 轉(zhuǎn)換規(guī)則校驗(yàn)；
• 不支持引用本地圖片的平臺(tái)，小于 40kb，一定會(huì)轉(zhuǎn)換為 base64 格式；
• h5 平臺(tái)，圖片文件小于 4kb 會(huì)轉(zhuǎn) base64，超出 4kb 時(shí)不轉(zhuǎn)；
• 圖片文件在其余平臺(tái)不會(huì)轉(zhuǎn) base64。

（2）相對(duì)路徑
實(shí)例：

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

5. 小結(jié)

項(xiàng)目開(kāi)發(fā)過(guò)程中，除了自身的代碼之外，對(duì)于外部資源的引用也是不可或缺的，所以需要熟練掌握在各種情況下，引入外部資源的方式。

本節(jié)課程我們主要學(xué)習(xí)了 uni-app 的資源路徑。本節(jié)課程的重點(diǎn)如下：

• 了解并掌握在模板內(nèi)引入靜態(tài)資源；

• 了解并掌握 js文件的引入，以及調(diào)用 js 插件的方法；

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