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/indexurl: "../../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-appeasycom 机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册,更为高效:

<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 下只包含 pathpages/index/indexpages/index/app 的对象。
🌐 在 Web 平台导入的结果中,pages 下只包含 pathpages/index/indexpages/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    

正常情况下,如 imagesrc 中直接引入 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 资源引用(绝对路径和相对路径)方法汇总


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java100道面试题

1.JVM内存结构 1. 方法区&#xff08;Method Area&#xff09; 方法区是JVM内存结构的一部分&#xff0c;用于存放类的相关信息&#xff0c;包括&#xff1a; 类的结构&#xff08;字段、方法、常量池等&#xff09;。字段和方法的描述&#xff0c;如名称、类型、访问修饰符…

【优选算法 分治】深入理解分治算法:分治算法入门小专题详解

快速排序算法 (1) 快速排序法 (2) 快排前后指针 (3) 快排挖坑法 颜色分类 题目解析 算法原理 算法原理和移动零非常相似 简述移动零的算法原理 cur 在从前往后扫描的过程中&#xff0c;如果扫描的数符合 f 性质&#xff0c;就把这个数放到 dest 之…

【STM32】I2C为什么要开漏输出和上拉电阻

为什么需要使用开漏输出 防止短路&#xff1a;假设使用推挽结构&#xff0c;多个设备挂在同一总线上&#xff0c;当存在某一设备将某一信号驱动为高电平&#xff0c;而其他设备驱动为低电平&#xff0c;会导致短路&#xff0c;导致器件损坏或降低寿命。对于开漏结构&#xff0…

nlp培训重点-2

1. 贝叶斯公式 import math import jieba import re import os import json from collections import defaultdictjieba.initialize()""" 贝叶斯分类实践P(A|B) (P(A) * P(B|A)) / P(B) 事件A&#xff1a;文本属于类别x1。文本属于类别x的概率&#xff0c;记做…

ubuntu 创建服务、查看服务日志

1. 在 /etc/systemd/system/ 下创建文件&#xff0c;名称为 xxx.service [Unit] DescriptionYour Service Description Afternetwork.target[Service] Typesimple ExecStart/path/to/your/service/executable Restarton-failure[Install] WantedBymulti-user.target2. 配置服务…

【前端系列01】优化axios响应拦截器

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、axios响应拦截器&#xff1a;☀️☀️☀️2.1 为什么前端需要响应拦截器element ui的消息组件 一、前言&#x1f680;&#x1f680;&#x1f680; ☀️ 回报不在行动之后&#xff0c;回报在行动之中。 这个系列可…

PINN模型详解

定义与原理 物理信息神经网络(Physics-Informed Neural Networks, PINN)是一种创新性的机器学习模型,巧妙地将物理知识与深度学习相结合。这种独特的设计理念源于Karniadakis教授的研究团队,他们在一系列开创性工作中提出了这一概念。 PINN的核心思想是在神经网络的损失函数…

Requests聚焦爬虫-数据解析

原理:定位到对应标签,获取标签内的东西 解析三种方法: 1:正则 58二手房。获取图片列表,二进制content。展开,每个图片是一个内容,正则从头取到尾,不同之处用 .*? 替换掉。 import requests import re import os if __name__ == "__main__":# url=https://…

如何在 Spring Cloud Gateway 中创建全局过滤器、局部过滤器和自定义条件过滤器

Spring Cloud Gateway 是一个功能强大的 API 网关&#xff0c;能够处理 HTTP 请求、响应及路由。通过过滤器机制&#xff0c;您可以在请求和响应过程中进行各种处理操作&#xff0c;如记录日志、身份验证、限流等。Spring Cloud Gateway 提供了三种主要类型的过滤器&#xff1a…

Kafka核心参数与使用02

一、从基础的客户端说起 Kafka 提供了非常简单的生产者&#xff08;Producer&#xff09;和消费者&#xff08;Consumer&#xff09;API。通过引入相应依赖后&#xff0c;可以快速上手编写生产者和消费者的示例。 1. 消息发送者主流程 一个最基础的 Producer 发送消息的步骤…

性能测试工具的原理与架构解析

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 在软件开发与运维领域&#xff0c;性能测试是确保系统稳定、高效运行的关键环节。性能测试工具作为实现这一目标的重要工具&#xff0c;通过模拟真实用户行为和负载…

微服务间通信的端口开放性探究:从单机到多机的转变

在微服务架构中&#xff0c;服务间的通信是系统稳定运行的关键。本文将探讨一个有趣的现象&#xff1a;当微服务部署在同一台服务器上时&#xff0c;即使某个服务的端口未对外开放&#xff0c;其他服务仍然能够成功调用它&#xff1b;然而&#xff0c;当这些服务被部署到不同的…

【insert 插入数据语法合集】.NET开源ORM框架 SqlSugar 系列

系列文章目录 &#x1f380;&#x1f380;&#x1f380; .NET开源 ORM 框架 SqlSugar 系列 &#x1f380;&#x1f380;&#x1f380; 文章目录 系列文章目录一、前言 &#x1f343;二、插入方式 &#x1f4af;2.1 单条插入实体2.2 批量 插入实体2.3 根据字典插入2.4 根据 Dat…

记一次k8s下容器启动失败,容器无日志问题排查

问题 背景 本地开发时&#xff0c;某应用增加logback-spring.xml配置文件&#xff0c;加入必要的依赖&#xff1a; <dependency><groupId>net.logstash.logback</groupId><artifactId>logstash-logback-encoder</artifactId><version>8…

【PPTist】批注、选择窗格

前言&#xff1a;本篇文章研究批注和选择窗格两个小功能 一、批注 批注功能就是介个小图标 点击可以为当前页的幻灯片添加批注&#xff0c;还能删除之前的批注 如果我们增加了登录功能&#xff0c;还可以在批注上显示当前的用户名和头像&#xff0c;不过现在是写死的。 左侧…

使用Paddledetection进行模型训练【Part1:环境配置】

目录 写作目的 安装文档 环境要求 版本依赖关系 安装说明 写作目的 方便大家进行模型训练前的环境配置。 安装文档 环境要求 PaddlePaddle &#xff1e;&#xff1d;2.3.2OS 64位操作系统Python 3(3.5.1/3.6/3.7/3.8/3.9/3.10)&#xff0c;64位版本pip/pip3(9.0.1)&am…

C++ scanf

1.scanf概念解释&#xff1a; C语言兼容C语言中的基本语句语法,scanf语句是C语言中的输入语句,在C语言环境中也可以使用。对于大数据的输入使用scanf比C的输入cin效率高、速度快。 scanf称为格式输入函数,其关键字最末一个字母f即为是格式"(format)之意",其意义是按指…

AWS ELB基础知识

1.负载均衡器的类型 需要了解三种类型的 ELB&#xff1a; Application Load Balancer &#xff08;ALB&#xff09; **&#xff1a; 在 HTTP/HTTPS 层&#xff08;OSI 模型的第 7 层&#xff09;运行。非常适合路由 HTTP/HTTPS 流量。支持高级路由功能&#xff0c;例如基于 U…

哺乳动物各器官和物种中长链非编码RNA的发育动态

文献名&#xff1a;Developmental dynamics of lncRNAs across mammalian organs and species 摘要&#xff1a; 尽管在人体及其他哺乳动物基因组中已识别出许多长链非编码RNA&#xff08;lncRNA&#xff09;&#xff0c;但对这些元素的系统功能特征研究仍然有限。特别是&…

数学建模入门——描述性统计分析

摘要&#xff1a;本篇博客主要讲解了数学建模入门的描述性统计分析&#xff0c;包括基本统计量的计算、数据的分布形态、数据可视化和相关性分析。 往期回顾&#xff1a; 数学建模入门——建模流程-CSDN博客 数学建模入门——数据预处理&#xff08;全&#xff09;-CSDN博客 …