資源路徑說明

1. 前言

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

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

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

在 <template> 標(biāo)簽內(nèi)引入靜態(tài)資源，可以用相對路徑和絕對路徑引入。比如用 <image> 標(biāo)簽的 src 屬性引入圖片，或者使用<video> 標(biāo)簽的 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 相對路徑

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

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

需要注意以下幾點：

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

3. js 文件引入

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

3.1 絕對路徑

應(yīng)用 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 調(diào)用 js 插件方法

實例：

// 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)用插件的時候，明明文件已經(jīng)成功引入了，卻不會成功打印出js插件中的內(nèi)容。這個時候可以檢查一下是否在js插件中使用 export 將變量暴露出去了。

因為js插件是獨立的文件，該文件內(nèi)部的所有的變量外部都無法獲取。如果希望獲取某個變量，必須通過export輸出，不然將會讀取失敗。

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

4.1 引入 css 文件

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

需要注意的是，只有 HBuilderX 2.6.6-alpha 版本開始才支持絕對路徑，舊版本不支持。

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

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

4.2 引入本地圖片

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

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

（1）絕對路徑
實例：

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

4.3 引入字體文件

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

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

需要注意以下幾點：

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

（2）相對路徑
實例：

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

5. 小結(jié)

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

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

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

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

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