uni-app 项目分包后，在分包的多级目录下创建新页面时，创建窗体显示的路径正确但页面会直接到分包的根目录下

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 项目分包后，在分包的多级目录下创建新页面时，创建窗体显示的路径正确但页面会直接到分包的根目录下

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

操作步骤：

  • 创建分包

预期结果：

  • 和主包一致

实际结果：

  • 创建到根目录下了

bug描述：

项目分包后，在分包的多级目录下创建新页面时，创建窗体显示的路径是正确的，但是创建后的页面会直接到分包的根目录下。


Harmonyos Next教程
3 回复

我看到22年有人提过了，到现在也没有解决


我今天配置分包的时候创建页面也发现这个问题了，找了好多帖子都没发现有解决的

在 uni-app 项目中，当使用分包加载时，确实可能会遇到路径解析不正确的问题，导致页面直接跳转到分包的根目录。这通常是由于页面路径配置不当或资源引用路径错误引起的。下面我将提供一个示例代码和配置，展示如何在多级目录下正确创建新页面，并确保页面路径解析正确。

1. 项目结构

假设你的项目结构如下：

uni-app-project/
├── pages/
│   ├── index/
│   │   └── index.vue
├── subpackages/
│   ├── packageA/
│   │   ├── pages/
│   │   │   ├── level1/
│   │   │   │   ├── level2/
│   │   │   │   │   └── newPage.vue
│   │   │   │   └── index.vue
│   │   │   └── app.json
│   │   └── app.vue
├── pages.json
├── main.js
└── ...

2. 配置 pages.json

在 pages.json 中，你需要正确配置分包路径和页面路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subpackages/packageA/",
      "pages": [
        {
          "path": "pages/level1/index",
          "style": {
            "navigationBarTitleText": "Level 1 Index"
          }
        },
        {
          "path": "pages/level1/level2/newPage",
          "style": {
            "navigationBarTitleText": "New Page"
          }
        }
      ]
    }
  ]
}

3. 页面引用和跳转

确保在页面中使用正确的路径进行引用和跳转。例如，在 level1/index.vue 中跳转到 level2/newPage.vue：

<template>
  <view>
    <button @click="navigateToNewPage">Go to New Page</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToNewPage() {
      uni.navigateTo({
        url: '/subpackages/packageA/pages/level1/level2/newPage'
      });
    }
  }
}
</script>

注意：在 uni.navigateTo 中使用的路径应该是相对于分包的根目录，并且需要包含分包的路径前缀（/subpackages/packageA/）。

总结

通过正确配置 pages.json 和使用相对路径进行页面引用和跳转，可以解决 uni-app 分包后多级目录下页面路径解析不正确的问题。确保路径配置正确，避免路径混淆，可以有效防止页面直接跳转到分包的根目录。

回到顶部