配置 @ 路径别名,优化小程序访问路径

配置 @ 路径别名,优化小程序访问路径

在开发大型小程序时,我们通常会采用分包策略来优化加载速度和用户体验。然而,这种分包方式往往会导致访问小程序根目录下文件的路径变得冗长而复杂。为了简化这些路径,我们可以借鉴 Vue 中的做法,使用 @ 符号来指向源码目录。幸运的是,小程序也提供了类似的配置方式,让我们能够轻松地实现这一功能。

如何在小程序中配置 @ 路径别名

小程序提供了一个名为 resolveAlias 的配置项,允许我们自定义模块路径的映射规则。通过在 app.json 文件中添加 resolveAlias 配置,我们可以为特定的路径设置别名,从而简化模块之间的引用。

官方文档参考: resolveAlias

下面是一个简单的配置示例:

{"resolveAlias": {"@/*": "/*"}
}

在这个配置中,@/* 被映射到了小程序项目的根目录(或 miniprogramRoot 指定的目录,如果 project.config.json 中有设置)。这意味着,当我们在代码中引用模块时,可以使用 @ 符号来代替冗长的路径。

注意事项
  1. 路径匹配规则resolveAlias 进行的是路径匹配,因此 keyvalue 必须以 /* 结尾。这是为了确保路径的灵活性和匹配准确性。

  2. miniprogramRoot 配置:如果在 project.config.json 中指定了 miniprogramRoot,那么 /* 指代的根目录将是 miniprogramRoot 对应的路径,而不是开发者工具项目的根目录。这一点在配置时需要特别注意,以免因路径错误而导致模块引用失败。

实际应用

配置了 @ 路径别名后,我们可以更加简洁地引用模块。例如,如果有一个位于小程序根目录下的 utils 文件夹,里面有一个 common.js 文件,我们可以这样引用它:

// 引入 common.js 文件
const common = require('@/utils/common.js');

而不需要写出完整的路径:

// 冗长的路径引用方式(不推荐)
const common = require('../../utils/common.js');

通过使用 @ 路径别名,我们不仅简化了代码中的路径引用,还提高了代码的可读性和可维护性。这对于大型小程序项目来说,无疑是一个非常有价值的优化措施。

希望本文能够帮助你更好地理解和应用小程序的 @ 路径别名配置。如果你有任何疑问或建议,请随时留言交流。

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

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

相关文章

标准库、STL、编译参数、正则表达式

标准库 标准库减少了不同程序员对编程语言语法语义的疑惑。 不同语言的标准库 C语言有标准库libc, 最新的Windows系统已更新为ucrt, 可在PC/移动设备共享crt. 相比C语言,C除了有标准C运行时库,增加了STL. STL 写了太多的不同参数类型的加法函数&#xff…

Python 入门(二、什么是 Python 的虚拟环境)

Python 入门第二课 ,Python 的虚拟环境...... by 矜辰所致前言 本来以为环境搭建好了,就直接开始敲代码了,但是一直看到一个专业词汇:虚拟环境。 对于习惯了嵌入式 C 语言开发博主来说,一开始确实有点不明白&#xf…

centos celery 日志管理

celery经常会产生大量日志,长时间累计下来会对服务器造成一定的压力 1 配置 logrotate 进行日志拆分 logrotate 是 Linux 系统中常用的日志管理工具。我们将使用它来管理 Celery 的日志文件,确保日志文件不会无限增长,并定期拆分、归档和删…

Spring集成Redisson及存取几种基本类型数据

目录 一.什么是Redisson 二.为什么要使用Redisson 三.Spring集成Redisson 1.添加依赖 2.添加配置信息 3.添加redisson配置类 四.Redisson存取各种类型数据 1.字符串(String类型) 存储 获取 2.object对象类型 1.实体类信息 2.存储 3.获取 3.List集合类型 第一种…

在java 中如何实现执行linux命令,通过post接口代理出来?

接口方式输入命令得返回结果 public AjaxResult doPost(HttpServletRequest request, HttpServletResponse response, String command) throws ServletException, IOException {// 设置响应内容类型 text/plain // response.setContentType("application/json"…

【Python】Qwen-VL-7B box

VLLM-Qwen2-VL-7B-Instruct import cv2# 读取图像 image_path haibaoA.png # 替换为图像的路径 image cv2.imread(image_path)# 定义框的坐标 (x1, y1) 是左上角,(x2, y2) 是右下角 x1, y1 200, 550 # 左上角坐标 x2, y2 799, 750 # 右下角坐标 h, w image.…

Unite Shanghai 2024 团结引擎专场 | 团结引擎 OpenHarmony 工程剖析

在 2024 年 7 月 24 日的 Unite Shanghai 2024 团结引擎专场演讲中,Unity中国 OpenHarmony 技术负责人刘伟贤对团结引擎导出的 OpenHarmony 工程进行了细节剖析,详细讲解 XComponent 如何与引擎结合,UI 线程和引擎线程的关联以及 ts/ets 的代…

ijkMediaPlayer+ TextureView 等比全屏播放视频(避免拉伸)

TextureView默认以fitxy的方式加载surface数据,如果需要等比全屏播放视频,避免拉伸,可以采用Matrix对TextureView进行变换 废话不多说,直接上代码 public class BaseIjkPlayer implements TextureView.SurfaceTextureListener{/…

smbms项目(1)

目录 一、项目搭建准备工作 二、登录功能实现 三、注销功能实现 四、登录拦截实现 一、项目搭建准备工作 1、搭建一个maven web项目 2、配置Tomcat 3、测试项目是否能够跑起来 4、导入项目中会遇到的jar包(servlet、jsp、mysql驱动、jstl、standard&#xf…

python+大数据+基于Spark的共享单车数据存储系统【内含源码+文档+部署教程】

博主介绍:✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌ 🍅由于篇幅限制,想要获取完整文章或者源码,或者代做&am…

Golang | Leetcode Golang题解之第464题我能赢吗

题目&#xff1a; 题解&#xff1a; func canIWin(maxChoosableInteger, desiredTotal int) bool {if (1maxChoosableInteger)*maxChoosableInteger/2 < desiredTotal {return false}dp : make([]int8, 1<<maxChoosableInteger)for i : range dp {dp[i] -1}var dfs …

浙江省发规院产业发展研究所调研组莅临迪捷软件考察调研

2024年10月10日下午&#xff0c;浙江省发展与规划院产业发展研究所调研组一行莅临迪捷软件考察调研&#xff0c;绍兴市府办、区发改、区经信、迪荡街道等相关领导陪同。 调研组一行参观了迪捷软件的展厅与办公区&#xff0c;深入了解了迪捷软件的公司发展历程、运营状况、产品…

Ubuntu 上使用 Nginx 实现反向代理并启用 HTTPS(详细教程)

拒绝使用宝塔&#xff0c;虽然宝塔很好用方便&#xff0c;但是他非常占用资源&#xff0c;所以我正在尝试转换我使用服务器的方式&#xff0c;通过命令来才做这些&#xff0c;下面是我的详细步骤。 在这篇教程中&#xff0c;我们将详细介绍如何在 Ubuntu 系统上使用 Nginx 搭建…

【论文#码率控制】ADAPTIVE RATE CONTROL FOR H.264

目录 摘要1.前言2.基本知识2.1 蛋鸡悖论2.2 基本单元的定义2.3 线性MAD预测模型 3.GOP级码率控制3.1 总比特数3.2 初始化量化参数 4.帧级码率控制4.1 非存储图像的量化参数4.2 存储图像的目标比特 5.基本单元级码率控制6.实验结果7.结论 《ADAPTIVE RATE CONTROL FOR H.264》 A…

go clean command

文章目录 1.简介2.格式3.选项4.示例5.应用场景6.小结参考文献 1.简介 在 Go 语言的开发过程中&#xff0c;管理依赖和构建缓存是非常重要的。随着项目的迭代&#xff0c;旧的缓存和不再需要的依赖可能会影响构建的效率和准确性。 Go 提供了一个非常实用的命令 go clean&#…

第J5周:DenseNet+SE-Net实战(TensorFlow版)

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营]中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊]** &#x1f4cc; 本周任务&#xff1a; ●1. 在DenseNet系列算法中插入SE-Net通道注意力机制&#xff0c;并完成猴痘病识别&#xff0…

Mysql(八) --- 视图

文章目录 前言1.什么是视图&#xff1f;2.创建视图3. 使用视图4. 修改数据4.1.注意事项 5. 删除视图6.视图的优点 前言 前面我们学习了索引&#xff0c;这次我们来学习视图 1.什么是视图&#xff1f; 视图是一个虚拟的表&#xff0c;它是基于一个或多个基本表或其他视图的查询…

linux 设置tomcat开机启动

在Linux系统中&#xff0c;要配置Tomcat开机自启动&#xff0c;可以创建一个名为 tomcat.service 的 systemd 服务文件&#xff0c;并将其放置在 /etc/systemd/system/ 目录下。以下是一个基本的服务文件示例&#xff0c;假设Tomcat安装在 /usr/local/tomcat 路径下&#xff1a…

Java:玩家打怪小游戏

今天&#xff0c;我们尝试用Java来做一个“打怪小游戏”&#xff0c;听名字就知道&#xff0c;我们是应该创建几个成员和怪物&#xff0c;还有知道知道成员和怪物的血量&#xff0c;一次攻击的伤害等等。。当然我们的游戏攻击模式是“回合制”&#xff08;其实是别的方法&#…

Element-ui官方示例(Popover 弹出框)

Element-ui官方示例&#xff08;Popover 弹出框&#xff09;&#xff0c;好用的弹出框。 使用 vue-cli3 我们为新版的 vue-cli 准备了相应的​Element 插件​&#xff0c;你可以用它们快速地搭建一个基于 Element 的项目。 使用 Starter Kit 我们提供了通用的项目模版&#…