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

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

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

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

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

官方文档参考： resolveAlias

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

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

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

注意事项

1. 路径匹配规则：resolveAlias 进行的是路径匹配，因此 key 和 value 必须以 /* 结尾。这是为了确保路径的灵活性和匹配准确性。

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

实际应用

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

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

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

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

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

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