资源路径说明

发布时间：2023-04-24 12:34:51 所属栏目：教程来源：

导读：在uni-app 项目开发的过程中，经常需要引入各类外部文件，比如我们程序开发用到的图片、文件等，这些外部文件会被我们放在根目录下面的 static文件夹中，或者 src目录下的 static 文件夹中。

将这些外部文件应用到

在uni-app 项目开发的过程中，经常需要引入各类外部文件，比如我们程序开发用到的图片、文件等，这些外部文件会被我们放在根目录下面的 static文件夹中，或者 src目录下的 static 文件夹中。

将这些外部文件应用到我们的项目中，就需要使用路径引入，看起来简单，但实际操作有很多需要注意的地方。本小节我们来学习在各种场景下面如何引用这些外部文件以及需要注意的一些问题。

模板内引入静态资源
在 <template> 标签内引入静态资源，可以用相对路径和绝对路径引入。比如用 <image> 标签的 src 属性引入图片，或者使用<video> 标签的 src 属性引入视频。我们来分别演示一下。

绝对路径
实例：

<template>
<view>

<image src="/static/imooc.png"></image>


<image src="@/static/imooc.png"></image>
</view>
</template>

相对路径
使用相对路径可能会出现路径查找失败的情况，并且在支付宝小程序组件内 <image> 标签不可以使用相对路径。所以我们日常开发过程中，尽量使用绝对路径，避免不必要的错误。
实例：

<image src="../../static/imooc.png"></image>
需要注意以下几点：

@开头的绝对路径以及相对路径会经过base64转换规则校验
 引入的静态资源在非h5平台，均不转为base64。
 H5平台，小于4kb的资源会被转换成base64，其余不转。
 自HBuilderX 2.6.6-alpha起template内支持@开头路径引入静态资源，旧版本不支持此方式。

js 文件引入
日常开发过程中，我们经常会在js文件中或者在 .vue 文件中的 <script> 标签内引入第三方js插件。可以使用相对路径和绝对路径引入。

绝对路径
应用 js 文件，直接使用 / 开头的路径，会报“文件查找失败”的错误，需要使用 @开头的路径。@开头的路径，指向的是项目的根目录。

实例：

<script>
//正确实例
import config from '@/common/config.js'

//错误实例
import config from '/common/config.js'

export default {
}
</script>

相对路径
实例：

import config from '../../common/config.js'

调用 js 插件方法
实例：

// config.js插件内容
const host = 'http://imooc.com'
export default host
// 引入插件并调用
<script>
import host from '../../common/config.js';
export default {
onLoad() {
console.log(‘打印出js插件的内容’,host)
}
   }
</script>
打印结果：http://imooc.com
调用插件的时候，明明文件已经成功引入了，却不会成功打印出js插件中的内容。这个时候可以检查一下是否在js插件中使用 export 将变量暴露出去了。

因为js插件是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出，不然将会读取失败。

css 引入静态资源
引入 css 文件
在 css 文件中或者 <style> 标签内引入 css 文件时，可以使用相对路径或者绝对路径。引入 scss、less 文件也是一样的。

需要注意的是，只有 HBuilderX 2.6.6-alpha 版本开始才支持绝对路径，旧版本不支持。

我们使用 @import 语句引入 css 文件，用;表示语句结束。
实例：

<style>
/* 相对路径 */
@import "../../common/imooc.css";

/* 绝对路径，旧版本不支持 */
@import url('/common/imooc.css');
@import url('@/common/imooc.css');
</style>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!