一、前言

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

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

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

今日探討主題：uni-app 資源引用（絕對(duì)路徑和相對(duì)路徑） 的問(wèn)題。

二、絕對(duì)路徑和相對(duì)路徑

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

2.1 絕對(duì)路徑

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

例如：

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

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

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

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

2.2 相對(duì)路徑

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

例如：

組件 components/custom/custom.vue

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

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

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

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

三、引用組件

傳統(tǒng) vue 項(xiàng)目開(kāi)發(fā)，引用組件需要 導(dǎo)入 - 注冊(cè) - 使用 三個(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. 注冊(cè)組件
	}
</script>

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

<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)化，開(kāi)發(fā)者只管使用，無(wú)需考慮導(dǎo)入和注冊(cè)，更為高效：

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

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

四、引用js

4.1 js 文件引入

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

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

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

4.2 NPM支持

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

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

1. 初始化npm工程
   若項(xiàng)目之前未使用 npm 管理依賴(lài)（項(xiàng)目根目錄下無(wú) 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)沒(méi)有，需要通過(guò)初始化命令來(lái)創(chuàng)建。

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

npm install packageName --save

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

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

注意：

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

五、引用css

使用 @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(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í)，可以使用相對(duì)路徑或絕對(duì)路徑，例如:

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

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

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 的對(duì)象。

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

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

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

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

<!-- 絕對(duì)路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對(duì)路徑 -->
<image class="logo" src="../../static/logo.png"></image>

注意：

• @ 開(kāi)頭的絕對(duì)路徑以及相對(duì)路徑會(huì)經(jīng)過(guò) 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)支持 @ 開(kā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)簽不可使用相對(duì)路徑

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

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

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

注意：

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

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

Tips：

• 引入字體圖標(biāo)請(qǐng)參考，字體圖標(biāo)。
• @開(kāi)頭的絕對(duì)路徑以及相對(duì)路徑會(huì)經(jīng)過(guò) 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 引入相對(duì)路徑或絕對(duì)路徑。

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

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

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

<!-- /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 不管是相對(duì)還是絕對(duì)路徑，都無(wú)法顯示，所以這時(shí)候需要在 js/uts中 使用 import 來(lái)引入。

<!-- /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)資源文件夾（目前暫不支持修改），資源存放此處后，可在任意文件直接使用相對(duì)或者絕對(duì)路徑引用,具體參考上述模板 css/js/uts 中引入靜態(tài)資源的說(shuō)明。

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

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

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

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

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

非 static 目錄下的靜態(tài)資源在 vue3 下，被引用的資源會(huì)編譯到 assets 目錄下，并重新命名為 原始名稱(chēng)+內(nèi)容hash,如：logo.png 會(huì)編譯為類(lèi)似 logo.cfd8fa94.png 的名稱(chēng)。如果該靜態(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資源引用的方法匯總(絕對(duì)路徑和相對(duì)路徑)的詳細(xì)內(nèi)容，更多關(guān)于uni-app資源引用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論