uni-app 资源引用（绝对路径和相对路径）方法汇总

文章目录

  • 一、前言🍃
  • 二、绝对路径和相对路径
    • 2.1 绝对路径
    • 2.2 相对路径
  • 三、引用组件
  • 四、引用js
    • 4.1 js 文件引入
    • 4.2 NPM支持
  • 五、引用css
  • 六、引用json
    • 6.1 json文件引入
  • 七、引用静态资源
    • 7.1 模板内引入静态资源
    • 7.2 css 引入静态资源
    • 7.3 js/uts 引入静态资源
    • 7.4 静态资源引入注意事项
    • 7.5 静态资源编译规则
  • 八、总结
  • 🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀

一、前言🍃

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
在这里插入图片描述
从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。
在这里插入图片描述

🎯今日探讨主题：uni-app 资源引用（绝对路径和相对路径） 的问题。

二、绝对路径和相对路径

在日常开发中，经常会遇到使用绝对路径还是相对路径的问题，下面我们介绍下这两种路径。

2.1 绝对路径

绝对路径：是指从项目根目录开始的完整路径。它用于指定文件或目录的确切位置。绝对路径通常以斜杠（/）开头，表示从根目录开始。

🌰例如：

<template>
  <!-- 图片组件引用绝对路径 -->
  <image src="/static/logo.png" />
  <!-- 视频组件引用绝对路径  -->
  <video src="/static/demo.mp4" />
  <!-- 其他需要引用资源的媒体组件均可以使用绝对路径 -->
</template>
<script setup>
// 使用一个图片资源时，可以使用绝对路径
uni.getImageInfo({
  src: "/static/logo.png",
});
// 跳转页面时，可以使用绝对路径
uni.navigateTo({
  url: "/pages/login/login",
});
</script>

这里的 /static/logo.png 就是一个绝对路径，表示图片文件位于项目根目录下的 static 文件夹中。

绝对路径 的优点是可以直接定位到文件的确切位置，不受当前目录的影响，通常需要动态传递的路径，我们建议使用绝对路径。

🎯注意: 当使用 import 语句导入代码文件或静态资源时，@/ 表示项目根目录的绝对路径。如 import { add } from "@/common/utils"

2.2 相对路径

相对路径：在编译时是指一个文件或目录相对于另一个文件或目录的位置，在运行时是指一个文件相对于当前页面路由的位置（不建议使用运行时的相对路径，应该优先使用绝对路径）。

🌰例如：
组件 components/custom/custom.vue

<template>
  <!-- 绑定动态路径 -->
  <image :src="src" />
</template>
<script setup>
// 编译时：使用 import 语句相对路径导入图片
import logo from "../../static/logo.png";
console.log(logo); // import 语句会在编译阶段根据当前文件位置转换为绝对路径

// 运行时
// 错误的相对路径用法，image组件会在运行时根据当前页面路由来转换该相对路径，当不同的页面使用custom组件时，转换的路径是不同的
// 应该使用绝对路径：/static/logo.png，这样可以确保在任意页面都访问到正确的图片地址
const src = "../../static/logo.png";

uni.navigateTo({
  // 运行时
  // 错误的相对路径用法，路由会在运行时根据当前页面路由来转换该相对路径
  // 应该使用绝对路径：/pages/index/index
  url: "../../pages/index/index",
});
</script>

🎯注意: 在 uni-app x 项目中，dialogPage 不影响页面栈和路由地址，所以也不会影响运行时的相对路径转换。`

三、引用组件

传统 vue 项目开发，引用组件需要 导入 - 注册 - 使用 三个步骤，如下：

<template>
	<view>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>

Vue 3.x 增加了 script setup 特性，将三步优化为两步，无需注册步骤，更为简洁：

<template>
	<view>
		<!-- 2.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

uni-app 的 easycom 机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效：

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

💯在 uni-app 项目中，页面引用组件和组件引用组件的方式都是一样的（可以理解为：页面是一种特殊的组件），均支持通过 easycom 方式直接引用。

四、引用js

4.1 js 文件引入

js 文件或 <script> 标签内（包括 renderjs 等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下：

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

🎯注意：js 文件 不支持 使用 / 开头的方式引入。

4.2 NPM支持

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

此文档要求开发者们对 npm 有一定的了解，因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm，请翻阅 NPM 官方文档进行学习。

  1. 初始化npm工程
    若项目之前未使用 npm 管理依赖（项目根目录下无 package.json 文件），先在项目根目录执行命令初始化 npm 工程：
npm init -y

💯cli 项目默认已经有 package.json 了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

  1. 安装依赖
    在项目根目录执行命令安装 npm 包：
npm install packageName --save
  1. 使用
    安装完即可使用 npm 包，js 中引入 npm 包：
import package from 'packageName'
const package = require('packageName')

🎯注意：

为多端兼容考虑，建议优先从 uni-app 插件市场 获取插件。直接从 npm 下载库很容易只兼容** H5** 端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK。类似 jQuery 等库只能用于 H5 端。
node_modules 目录必须在项目根目录下。不管是 cli 项目还是 HBuilderX 创建的项目。
关于ui库的获取，详见多端UI库。

五、引用css

使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。

🌰示例代码：

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

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

六、引用json

6.1 json文件引入

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

js | ts | uts 文件或 script 标签内引入 json 文件时，可以使用相对路径或绝对路径，例如:

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import pagesJson from '@/pages.json';
// 相对路径
import pagesJson from '../../common/pages.json';

导入 json 文件时支持解构，此时会根据导入内容进行摇树，减小包体积，例如：

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

导入的 json 文件内部支持条件编译, 导入的结果是根据条件编译规则进行处理后的结果，以如下 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 平台导入的结果中，pages 下只包含 path 为 pages/index/index 和 pages/index/app 的对象。
🌐 在 Web 平台导入的结果中，pages 下只包含 path 为 pages/index/index 和 pages/index/web 的对象。

七、引用静态资源

7.1 模板内引入静态资源

template 内引入静态资源，如 image、video 等标签的 src 属性时，可以使用相对路径或者绝对路径，形式如下：

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/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>

🎯注意：

  • @ 开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 引入的静态资源在非 web 平台，均不转为 base64。
  • web 平台，小于 4kb 的资源会被转换成 base64，其余不转。
  • 自HBuilderX 2.6.6起 template 内支持 @ 开头路径引入静态资源，旧版本不支持此方式
  • App 平台自HBuilderX 2.6.9起 template 节点中引用静态资源文件时（如：图片），调整查找策* 略为【基于当前文件的路径搜索】，与其他平台保持一致
  • 支付宝小程序组件内 image 标签不可使用相对路径

7.2 css 引入静态资源

css 文件或 style 标签内引入 css 文件时（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起支持绝对路径引入静态资源，🚫旧版本不支持此方式。
css 文件或 style 标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

🪭Tips：

  • 引入字体图标请参考，字体图标。
  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验。
  • 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）。
  • web 平台，小于 4kb 会转 base64，超出 4kb 时不转。
  • 其余平台不会转 base64。

7.3 js/uts 引入静态资源

js/uts 中引入静态资源，多用于静态资源存放在非 static 目录中的情况，可以使用 import 引入相对路径或绝对路径。

例：有如下目录结构 ，在 static 和页面文件夹下分别有静态资源。


├── 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 不管是相对还是绝对路径，都无法显示，所以这时候需要在 js/uts中 使用 import 来引入。

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

<script>
// 使用 import 引入静态资源，并在 data 中赋值引用
import icon_src from './icon.png'
export default { 
  data() {
    return { 
      src: icon_src
    }
  },
}
</script>

7.4 静态资源引入注意事项

通常项目中规定根目录下的 static 为静态资源文件夹（目前暂不支持修改），资源存放此处后，可在任意文件直接使用相对或者绝对路径引用,具体参考上述模板 css/js/uts 中引入静态资源的说明。

而非 static 目录的静态资源，不支持直接引用，需要在 js/uts 中使用 import 来引入，确保路径正确。

综上所述，我们总结一下静态资源引用的注意事项：

  • 在模板或者 css 文件使用 static 目录中的静态资源，无需特殊处理，可直接通过相对路径或者绝对路径直接引入。
  • 在 js/uts 文件使用静态资源，需要使用 import 来引入。
  • 不管在任何文件引入非 static 目中的静态资源，均需在 js/uts 文件使用 import 来引入。

7.5 静态资源编译规则

项目 static 目录下的静态资源，会被直接拷贝到编译后目录的 static 目录下。

非 static 目录下的静态资源在 vue3 下，被引用的资源会编译到 assets 目录下，并重新命名为 原始名称+内容hash,如：logo.png 会编译为类似 logo.cfd8fa94.png 的名称。如果该静态资源未被引用，则不会被编译器处理。

非 static 目录下的静态资源在 vue2 不同平台下，编译规则有些不同：

自 HBuilderX 4.0 起已和 vue3 保持一致

web: 静态资源将会编译到 static -> img 下, 如小于 4k 则转为 base64。
小程序：静态资源将会编译到资源同名文件下，如小于 40kb 则转 base64。
app: 静态资源将会编译到资源同名文件下。

八、总结

东西还是蛮多的，一不小心就入坑。

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀

一、uni-app 组成和跨端原理
二、uni-app 各端差异注意事项
三、uni-app 离线本地存储方案
四、uni-app UI库、框架、组件选型指南
五、uni-app 蓝牙开发
六、uni-app 导航栏开发指南
七、uni-app 原生控件层级过高无法覆盖的解决方案
八、uni-app 设置缓存过期时间
九、uni-app H5端使用注意事项
十、uni-app之web-view组件 postMessage 通信【跨端开发系列】
十一、uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置【跨端开发系列】
十二、uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】
十三、uni-app 跨端开发精美开源UI框架推荐
十四、uni-app 中使用微信小程序第三方 SDK 及资源汇总
十五、uni-app 资源引用（绝对路径和相对路径）方法汇总

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/949787.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

机器学习基础-支持向量机SVM

机器学习基础-支持向量机SVM

目录 基本概念和定义 1. 超平面&#xff08;Hyperplane&#xff09; 2. 支持向量&#xff08;Support Vectors&#xff09; 3. 线性可分 4. 边界 SVM算法基本思想和分类 基本思想 间隔最大化 间隔&#xff08;Margin&#xff09; 软边距 SVM 核函数的概念 基本概念…
阅读更多...
TypyScript从入门到精通

TypyScript从入门到精通

TypyScript从入门到精通 TypyScript 是什么&#xff1f;增加了什么环境搭建二、为何需要 TypeScript三、编译 TypeScript四、类型声明五、类型推断基本类型六、类型总览JavaScript 中的数据类型TypeScript 中的数据类型1. 上述所有 JavaScript 类型2. 六个新类型&#xff1a;3.…
阅读更多...
mybatisX插件的使用，以及打包成配置

mybatisX插件的使用，以及打包成配置

装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己要的包和类&#xff1b; 如果要把自己的配置设置成一个自定义模板&a…
阅读更多...
简单的jmeter数据请求学习

简单的jmeter数据请求学习

简单的jmeter数据请求学习 1.需求 我们的流程服务由原来的workflow-server调用wfms进行了优化&#xff0c;将wfms服务操作并入了workflow-server中&#xff0c;去除了原来的webservice服务调用形式&#xff0c;增加了并发处理&#xff0c;现在想测试模拟一下&#xff0c;在一…
阅读更多...
Java后端常用的4种请求方式(通俗易懂)

Java后端常用的4种请求方式(通俗易懂)

文章目录 前言通用接口类(ControllerDemo)通用实体类(UserEntity)通用响应类(HttpClientResult)成功截图(先启动项目,然后右键执行main方法) HttpClientHttpClient 的主要类代码案例导入依赖工具类(HttpClientUtil)测试类 HttpURLConnection简介调用步骤代码案例导入依赖工具类…
阅读更多...
floodfill算法_dfs

floodfill算法_dfs

之前我们用BFS解决floodfil算法 BFS 解决 FloodFill 算法_图像渲染_岛屿数量_被围绕的区域-CSDN博客 下面我们用dfs进行解决 733. 图像渲染 从初始位置开始dfs&#xff0c;找和它值相同的&#xff0c;并在dfs过程中把值改为目标值。因为会改变原数组&#xff0c;不用vis记录经过…
阅读更多...
40% 降本：多点 DMALL x StarRocks 的湖仓升级实战

40% 降本：多点 DMALL x StarRocks 的湖仓升级实战

小编导读&#xff1a; 多点 DMALL 成立于2015年&#xff0c;持续深耕零售业&#xff0c;为企业提供一站式全渠道数字零售解决方案 DMALL OS。作为 DMALL OS 数字化能力的技术底座&#xff0c;大数据平台历经多次迭代平稳支撑了公司 To B 业务的快速开展。随着国家产业升级和云原…
阅读更多...
AI-Talk开发板之超拟人

AI-Talk开发板之超拟人

一、说明 运行duomotai_ap sdk下的LLM_chat例程&#xff0c;实现开发板和超拟人大模型进行语音交互&#xff0c;支持单轮和多轮交互。 二、SDK更新 v2.3.0及以上的SDK版本才支持超拟人&#xff0c;如果当前SDK在v2.3.o以下&#xff0c;需要更新SDK。在SDK目录(duomotai_ap)下…
阅读更多...
graylog+sidecar通过docker-compose部署并采集SSH登录日志

graylog+sidecar通过docker-compose部署并采集SSH登录日志

文章目录 前言一、graylog日志系统数据流向清洗图二、资源准备及部署1.docker-compose部署2.准备docker-compose.yml文件3.安装graylog-sidecar并配置4.给sidecar创建token 三、graylog-WEB配置采集SSH日志1.配置Inputs2.创建sidecar采集器3.将页面创建好的sidecar与服务器绑定…
阅读更多...
【Vue.js】监听器功能（EventListener）的实际应用【合集】

【Vue.js】监听器功能（EventListener）的实际应用【合集】

目录 &#x1f914;在实际开发过程中&#xff0c;我遇到了一个颇为棘手的小问题 &#x1f60b;解决这个小问题 问题出现的原因剖析 解决方法阐述 问题成功解决&#xff01;​ &#x1f4d6;相关知识总结 基本概念 使用方法 实际应用场景 &#x1f914;在实际开发过程中…
阅读更多...
2023年区块链职业技能大赛——区块链应用技术(一)模块一

2023年区块链职业技能大赛——区块链应用技术(一)模块一

模块一:区块链产品方案设计及系统运维: 任务1-1:区块链产品需求分析与方案设计 1.依据给定区块链食品溯源系统的业务架构图&#xff0c;对考题进行业务分析&#xff0c;可能多的去考虑一个业务系统所需要的模块&#xff0c;使用Visio或思维导图工具展现本系统的基本设计概念和…
阅读更多...
【HarmonyOS应用开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】

【HarmonyOS应用开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】

目录 &#x1f60b;环境配置&#xff1a;华为HarmonyOS开发者 &#x1f4fa;演示效果&#xff1a; &#x1f4d6;实验步骤及方法&#xff1a; 一、在media文件夹中添加想要使用的图片素材​ 二、在entry/src/main/ets/page目录下创建Welcome.ets文件 1. 整体结构与组件声…
阅读更多...
Flutter Android修改应用名称、应用图片、应用启动画面

Flutter Android修改应用名称、应用图片、应用启动画面

修改应用名称 打开Android Studio&#xff0c;打开对应项目的android文件。 选择app下面的manifests->AndroidManifest.xml文件&#xff0c;将android:label"bluetoothdemo2"中的bluetoothdemo2改成自己想要的名称。重新启动或者重新打包&#xff0c;应用的名称…
阅读更多...
MES管理系统如何解决企业制造瓶颈

MES管理系统如何解决企业制造瓶颈

在当今全球化与信息化高度融合的时代&#xff0c;制造业作为支撑国家经济发展的关键产业&#xff0c;正处于发展的十字路口&#xff0c;面临着一系列严峻挑战。从日常所需的各类用品到先进的高端工业产品&#xff0c;制造业的稳定发展对经济的稳健运行至关重要&#xff0c;一旦…
阅读更多...
Maven 详细配置：Maven settings 配置文件的详细说明

Maven 详细配置：Maven settings 配置文件的详细说明

Maven settings 配置文件是 Maven 环境的重要组成部分&#xff0c;它用于定义用户特定的配置信息和全局设置&#xff0c;例如本地仓库路径、远程仓库镜像、代理服务器以及认证信息等。settings 文件分为全局配置文件&#xff08;settings.xml&#xff09;和用户配置文件&#x…
阅读更多...
【C++】18.继承

【C++】18.继承

文章目录 1.继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 1.3 继承类模板 2.基类和派生类对象赋值转换3.继承中的作用域3.1 隐藏规则&#xff1a;3.2 考察继承作用域相关选择题 4.派生类的默认成员函数4…
阅读更多...
声音是如何产生的

声音是如何产生的

一、音频概述 RTMP中一般音频采用aac编码&#xff0c;采样率为44100HZ, 每帧1024采样&#xff0c;帧率43&#xff0c;23.2ms一帧 RTC中一般音频采用opus编码&#xff0c;采样率为48000HZ&#xff0c;每帧480采样&#xff0c;帧率100&#xff0c;10ms一帧 通道数&#xff08;c…
阅读更多...
什么是中间件中间件有哪些

什么是中间件中间件有哪些

什么是中间件&#xff1f; 中间件&#xff08;Middleware&#xff09;是指在客户端和服务器之间的一层软件组件&#xff0c;用于处理请求和响应的过程。 中间件是指介于两个不同系统之间的软件组件&#xff0c;它可以在两个系统之间传递、处理、转换数据&#xff0c;以达到协…
阅读更多...
问题清除指南｜关于num_classes与 BCELoss、BCEWithLogitsLoss 和 CrossEntropyLoss 的关系

问题清除指南｜关于num_classes与 BCELoss、BCEWithLogitsLoss 和 CrossEntropyLoss 的关系

前言&#xff1a;关于「 num_classes 1 」引发的探究。 2024年尾声&#xff0c;学弟问到一个问题&#xff1a;在研究工作 CNNDetection 的github开源代码 networks/trainer.py 文件的 line 27 self.model resnet50(num_classes1) 中&#xff0c;变量 num_classes 的值为1&…
阅读更多...
FinDKG: 用于检测金融市场全球趋势的动态知识图谱与大型语言模型

FinDKG: 用于检测金融市场全球趋势的动态知识图谱与大型语言模型

“FinDKG: Dynamic Knowledge Graphs with Large Language Models for Detecting Global Trends in Financial Markets” 论文地址&#xff1a;https://arxiv.org/pdf/2407.10909 摘要 动态知识图&#xff08;DKG&#xff09;能够表示对象间随时间变化的关系&#xff0c;适用于…
阅读更多...
最新文章

Copyright @ 2022~2023