我要评论一、前言
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 官方文档进行学习。
- 初始化npm工程
若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：
npm init -y
cli 项目默认已经有 package.json 了。hbuilderx创建的项目默认没有，需要通过初始化命令来创建。
- 安装依赖
在项目根目录执行命令安装npm包：
npm install packagename --save
- 使用
安装完即可使用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资源引用方法的资料请关注代码网其它相关文章！
发表评论