一、前言

uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

uni-app 在開發(fā)者數(shù)量、案例、跨端抹平度、擴(kuò)展靈活性、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等8大關(guān)鍵指標(biāo)上擁有更強(qiáng)的優(yōu)勢。

從下面 uni-app 功能框架圖可看出， uni-app 在跨平臺(tái)的過程中，不犧牲平臺(tái)特色，可優(yōu)雅的調(diào)用平臺(tái)專有能力，真正做到海納百川、各取所長。

今日探討主題：uni-app 資源引用（絕對路徑和相對路徑） 的問題。

二、絕對路徑和相對路徑

在日常開發(fā)中，經(jīng)常會(huì)遇到使用絕對路徑還是相對路徑的問題，下面我們介紹下這兩種路徑。

2.1 絕對路徑

絕對路徑：是指從項(xiàng)目根目錄開始的完整路徑。它用于指定文件或目錄的確切位置。絕對路徑通常以斜杠（/）開頭，表示從根目錄開始。

例如：

<template>
  <!-- 圖片組件引用絕對路徑 -->
  <image src="/static/logo.png" />
  <!-- 視頻組件引用絕對路徑  -->
  <video src="/static/demo.mp4" />
  <!-- 其他需要引用資源的媒體組件均可以使用絕對路徑 -->
</template>
<script setup>
// 使用一個(gè)圖片資源時(shí)，可以使用絕對路徑
uni.getImageInfo({
  src: "/static/logo.png",
});
// 跳轉(zhuǎn)頁面時(shí)，可以使用絕對路徑
uni.navigateTo({
  url: "/pages/login/login",
});
</script> 

這里的 /static/logo.png 就是一個(gè)絕對路徑，表示圖片文件位于項(xiàng)目根目錄下的 static 文件夾中。

絕對路徑 的優(yōu)點(diǎn)是可以直接定位到文件的確切位置，不受當(dāng)前目錄的影響，通常需要?jiǎng)討B(tài)傳遞的路徑，我們建議使用絕對路徑。

注意: 當(dāng)使用 import 語句導(dǎo)入代碼文件或靜態(tài)資源時(shí)，@/ 表示項(xiàng)目根目錄的絕對路徑。如 import { add } from "@/common/utils"

2.2 相對路徑

相對路徑：在編譯時(shí)是指一個(gè)文件或目錄相對于另一個(gè)文件或目錄的位置，在運(yùn)行時(shí)是指一個(gè)文件相對于當(dāng)前頁面路由的位置（不建議使用運(yùn)行時(shí)的相對路徑，應(yīng)該優(yōu)先使用絕對路徑）。

例如：

組件 components/custom/custom.vue

<template>
  <!-- 綁定動(dòng)態(tài)路徑 -->
  <image :src="src" />
</template>
<script setup>
// 編譯時(shí)：使用 import 語句相對路徑導(dǎo)入圖片
import logo from "../../static/logo.png";
console.log(logo); // import 語句會(huì)在編譯階段根據(jù)當(dāng)前文件位置轉(zhuǎn)換為絕對路徑

// 運(yùn)行時(shí)
// 錯(cuò)誤的相對路徑用法，image組件會(huì)在運(yùn)行時(shí)根據(jù)當(dāng)前頁面路由來轉(zhuǎn)換該相對路徑，當(dāng)不同的頁面使用custom組件時(shí)，轉(zhuǎn)換的路徑是不同的
// 應(yīng)該使用絕對路徑：/static/logo.png，這樣可以確保在任意頁面都訪問到正確的圖片地址
const src = "../../static/logo.png";

uni.navigateTo({
  // 運(yùn)行時(shí)
  // 錯(cuò)誤的相對路徑用法，路由會(huì)在運(yùn)行時(shí)根據(jù)當(dāng)前頁面路由來轉(zhuǎn)換該相對路徑
  // 應(yīng)該使用絕對路徑：/pages/index/index
  url: "../../pages/index/index",
});
</script>

注意: 在 uni-app x 項(xiàng)目中，dialogPage 不影響頁面棧和路由地址，所以也不會(huì)影響運(yùn)行時(shí)的相對路徑轉(zhuǎn)換。`

三、引用組件

傳統(tǒng) vue 項(xiàng)目開發(fā)，引用組件需要 導(dǎo)入 - 注冊 - 使用 三個(gè)步驟，如下：

<template>
	<view>
		<!-- 3.使用組件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 導(dǎo)入組件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注冊組件
	}
</script>

Vue 3.x 增加了 script setup 特性，將三步優(yōu)化為兩步，無需注冊步驟，更為簡潔：

<template>
	<view>
		<!-- 2.使用組件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 導(dǎo)入組件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

uni-app 的 easycom 機(jī)制，將組件引用進(jìn)一步優(yōu)化，開發(fā)者只管使用，無需考慮導(dǎo)入和注冊，更為高效：

<template>
	<view>
		<!-- 1.使用組件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
</script>

在 uni-app 項(xiàng)目中，頁面引用組件和組件引用組件的方式都是一樣的（可以理解為：頁面是一種特殊的組件），均支持通過 easycom 方式直接引用。

四、引用js

4.1 js 文件引入

js 文件或 <script> 標(biāo)簽內(nèi)（包括 renderjs 等）引入 js 文件時(shí)，可以使用相對路徑和絕對路徑，形式如下：

// 絕對路徑，@指向項(xiàng)目根目錄，在cli項(xiàng)目中@指向src目錄
import add from '@/common/add.js';
// 相對路徑
import add from '../../common/add.js';

注意：js 文件 不支持 使用 / 開頭的方式引入。

4.2 NPM支持

uni-app支持使用 npm 安裝第三方包。

此文檔要求開發(fā)者們對 npm 有一定的了解，因此不會(huì)再去介紹 npm 的基本功能。如若之前未接觸過 npm，請翻閱 NPM 官方文檔進(jìn)行學(xué)習(xí)。

1. 初始化npm工程
   若項(xiàng)目之前未使用 npm 管理依賴（項(xiàng)目根目錄下無 package.json 文件），先在項(xiàng)目根目錄執(zhí)行命令初始化 npm 工程：

npm init -y

cli 項(xiàng)目默認(rèn)已經(jīng)有 package.json 了。HBuilderX創(chuàng)建的項(xiàng)目默認(rèn)沒有，需要通過初始化命令來創(chuàng)建。

• 安裝依賴
  在項(xiàng)目根目錄執(zhí)行命令安裝 npm 包：

npm install packageName --save

• 使用
  安裝完即可使用 npm 包，js 中引入 npm 包：

import package from 'packageName'
const package = require('packageName')

注意：

為多端兼容考慮，建議優(yōu)先從 uni-app 插件市場 獲取插件。直接從 npm 下載庫很容易只兼容** H5** 端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 組件和 js 模塊，安裝的模塊及其依賴的模塊使用的 API 必須是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地圖微信小程序 SDK。類似 jQuery 等庫只能用于 H5 端。
node_modules 目錄必須在項(xiàng)目根目錄下。不管是 cli 項(xiàng)目還是 HBuilderX 創(chuàng)建的項(xiàng)目。
關(guān)于ui庫的獲取，詳見多端UI庫。

五、引用css

使用 @import 語句可以導(dǎo)入外聯(lián)樣式表，@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

示例代碼：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

六、引用json

6.1 json文件引入

uni-app vue3 和 uni-app x (HBuilderX 4.25+) 項(xiàng)目支持引入 json 文件。

js | ts | uts 文件或 script 標(biāo)簽內(nèi)引入 json 文件時(shí)，可以使用相對路徑或絕對路徑，例如:

// 絕對路徑，@指向項(xiàng)目根目錄，在cli項(xiàng)目中@指向src目錄
import pagesJson from '@/pages.json';
// 相對路徑
import pagesJson from '../../common/pages.json';

導(dǎo)入 json 文件時(shí)支持解構(gòu)，此時(shí)會(huì)根據(jù)導(dǎo)入內(nèi)容進(jìn)行搖樹，減小包體積，例如：

import { pages } from '@/pages.json';

導(dǎo)入的 json 文件內(nèi)部支持條件編譯, 導(dǎo)入的結(jié)果是根據(jù)條件編譯規(guī)則進(jìn)行處理后的結(jié)果，以如下 json 文件為例：

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "index"
      }
    },
    // #ifdef APP
    {
      "path": "pages/index/app",
      "style": {
        "navigationBarTitleText": "app"
      }
    },
    // #endif 
    // #ifdef H5 
    {
      "path": "pages/index/web",
      "style": {
        "navigationBarTitleText": "web"
      }
    }
    // #endif 
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {}
}

在 App 平臺(tái)導(dǎo)入的結(jié)果中，pages 下只包含 path 為 pages/index/index 和 pages/index/app 的對象。

在 Web 平臺(tái)導(dǎo)入的結(jié)果中，pages 下只包含 path 為 pages/index/index 和 pages/index/web 的對象。

七、引用靜態(tài)資源

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

template 內(nèi)引入靜態(tài)資源，如 image、video 等標(biāo)簽的 src 屬性時(shí)，可以使用相對路徑或者絕對路徑，形式如下：

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/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>

注意：

• @ 開頭的絕對路徑以及相對路徑會(huì)經(jīng)過 base64 轉(zhuǎn)換規(guī)則校驗(yàn)
• 引入的靜態(tài)資源在非 web 平臺(tái)，均不轉(zhuǎn)為 base64。
• web 平臺(tái)，小于 4kb 的資源會(huì)被轉(zhuǎn)換成 base64，其余不轉(zhuǎn)。
• 自HBuilderX 2.6.6起 template 內(nèi)支持 @ 開頭路徑引入靜態(tài)資源，舊版本不支持此方式
• App 平臺(tái)自HBuilderX 2.6.9起 template 節(jié)點(diǎn)中引用靜態(tài)資源文件時(shí)（如：圖片），調(diào)整查找策* 略為【基于當(dāng)前文件的路徑搜索】，與其他平臺(tái)保持一致
• 支付寶小程序組件內(nèi) image 標(biāo)簽不可使用相對路徑

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

css 文件或 style 標(biāo)簽內(nèi)引入 css 文件時(shí)（scss、less 文件同理），可以使用相對路徑或絕對路徑（HBuilderX 2.6.6）

/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');

注意：

自HBuilderX 2.6.6起支持絕對路徑引入靜態(tài)資源，舊版本不支持此方式。
css 文件或 style 標(biāo)簽內(nèi)引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，有些小程序端 css 文件不允許引用本地文件（請看注意事項(xiàng)）。

/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);

Tips：

• 引入字體圖標(biāo)請參考，字體圖標(biāo)。
• @開頭的絕對路徑以及相對路徑會(huì)經(jīng)過 base64 轉(zhuǎn)換規(guī)則校驗(yàn)。
• 不支持本地圖片的平臺(tái)，小于 40kb，一定會(huì)轉(zhuǎn) base64。（共四個(gè)平臺(tái) mp-weixin, mp-qq, mp-toutiao, app v2）。
• web 平臺(tái)，小于 4kb 會(huì)轉(zhuǎn) base64，超出 4kb 時(shí)不轉(zhuǎn)。
• 其余平臺(tái)不會(huì)轉(zhuǎn) base64。

7.3 js/uts 引入靜態(tài)資源

js/uts 中引入靜態(tài)資源，多用于靜態(tài)資源存放在非 static 目錄中的情況，可以使用 import 引入相對路徑或絕對路徑。

例：有如下目錄結(jié)構(gòu) ，在 static 和頁面文件夾下分別有靜態(tài)資源。

├── pages                            
│   └── index
│       │── index.uvue  
│       └── icon.png                  
└── static                             
    └── logo.png    
                  

正常情況下，如 image 的 src 中直接引入 static 中 logo.png ，可以使用相對路徑或絕對路徑。

<!-- /pages/index/index.vue -->
<template>
	<view class="content">
        <image src="../../static/logo.png" />
        <image src="/static/logo.png" />
        <image src="@static/logo.png" />
	</view>
</template>

而引入 index 下的 icon.png 不管是相對還是絕對路徑，都無法顯示，所以這時(shí)候需要在 js/uts中 使用 import 來引入。

<!-- /pages/index/index.vue -->
<template>
	<view class="content">
        <image :src="src" />
	</view>
</template>

<script>
// 使用 import 引入靜態(tài)資源，并在 data 中賦值引用
import icon_src from './icon.png'
export default { 
  data() {
    return { 
      src: icon_src
    }
  },
}
</script>

7.4 靜態(tài)資源引入注意事項(xiàng)

通常項(xiàng)目中規(guī)定根目錄下的 static 為靜態(tài)資源文件夾（目前暫不支持修改），資源存放此處后，可在任意文件直接使用相對或者絕對路徑引用,具體參考上述模板 css/js/uts 中引入靜態(tài)資源的說明。

而非 static 目錄的靜態(tài)資源，不支持直接引用，需要在 js/uts 中使用 import 來引入，確保路徑正確。

綜上所述，我們總結(jié)一下靜態(tài)資源引用的注意事項(xiàng)：

• 在模板或者 css 文件使用 static 目錄中的靜態(tài)資源，無需特殊處理，可直接通過相對路徑或者絕對路徑直接引入。
• 在 js/uts 文件使用靜態(tài)資源，需要使用 import 來引入。
• 不管在任何文件引入非 static 目中的靜態(tài)資源，均需在 js/uts 文件使用 import 來引入。

7.5 靜態(tài)資源編譯規(guī)則

項(xiàng)目 static 目錄下的靜態(tài)資源，會(huì)被直接拷貝到編譯后目錄的 static 目錄下。

非 static 目錄下的靜態(tài)資源在 vue3 下，被引用的資源會(huì)編譯到 assets 目錄下，并重新命名為 原始名稱+內(nèi)容hash,如：logo.png 會(huì)編譯為類似 logo.cfd8fa94.png 的名稱。如果該靜態(tài)資源未被引用，則不會(huì)被編譯器處理。

非 static 目錄下的靜態(tài)資源在 vue2 不同平臺(tái)下，編譯規(guī)則有些不同：

自 HBuilderX 4.0 起已和 vue3 保持一致

web: 靜態(tài)資源將會(huì)編譯到 static -> img 下, 如小于 4k 則轉(zhuǎn)為 base64。
小程序：靜態(tài)資源將會(huì)編譯到資源同名文件下，如小于 40kb 則轉(zhuǎn) base64。
app: 靜態(tài)資源將會(huì)編譯到資源同名文件下。

八、總結(jié)

東西還是蠻多的，一不小心就入坑。

以上就是uni-app資源引用的方法匯總(絕對路徑和相對路徑)的詳細(xì)內(nèi)容，更多關(guān)于uni-app資源引用方法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論