uni-app2已实现分包异步化，分包引入分包js文件可行；但升级至uni-app3(vue3+vite)时报错。

uni-app2已实现分包异步化，分包引入分包js文件可行；但升级至uni-app3(vue3+vite)时报错。

操作步骤：

  • 分包异步化，分包引入分包的 js 文件报错

预期结果：

  • 不报错

实际结果：

  • 路径都是正常的，es5 也开启了。找不到 module

bug描述：

image

信息类别 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.4.1 (23E224)
第三方开发者工具版本号 1.06.2402040darwin-arm63
基础库版本号 3.4.4
项目创建方式 CLI
CLI版本号 3.0.0-4010520240507001

更多关于uni-app2已实现分包异步化，分包引入分包js文件可行；但升级至uni-app3(vue3+vite)时报错。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

是因为 uniapp2 用的 webpack 吗？ uniapp3 用的 Vite ，Vite 在编译时预先解析所有的import语句，而Webpack在运行时解析。而因为Vite使用了ESM（ECMAScript模块）的静态导入特性，而Webpack使用的是CommonJS的动态导入。所以 分包异步化的包解析时可能拿不到？这咋搞？Uniapp3 有没有配置选项可以支持？？？

更多关于uni-app2已实现分包异步化，分包引入分包js文件可行；但升级至uni-app3(vue3+vite)时报错。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


补充下分包配置：
manifest.json

“mp-weixin”: {
“optimization”: {
“subPackages”: true
},
} pages.json {
“entryPagePath”: “pages/home/index”,
“pages”: [
{
“path”: “pages/home/index”,
“style”: {
“navigationBarBackgroundColor”: “#ff6600”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “小程序”,
“disableScroll”: true,
}
},
{
“path”: “pages/confirm-order/index”,
“style”: {
“mp-weixin”: {
“usingComponents”: {
“confirm-order-page”: “/pages/confirm-order-subpack/index”
},
“componentPlaceholder”: {
“confirm-order-page”: “view”
}
}
}
},
],
“preloadRule”: {
“pages/home/index”: {
“network”: “all”,
“packages”: [
“pages/home-sub-pack”,
“pages/confirm-order-subpack”,
]
},
“pages/confirm-order/index”: {
“network”: “all”,
},
},
“subPackages”: [
{
“root”: “pages/home-sub-pack”,
“plugins”: {
“turingCore”: {
“version”: “1.0.25”,
“provider”: “wx63af045606be281d”
}
},
“pages”: [
{
“path”: “index”,
“style”: {}
}
]
},
{
“root”: “pages/confirm-order-subpack”,
“pages”: [
{
“path”: “index”,
“style”: {
“navigationBarBackgroundColor”: “#f3f4f5”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “确认订单”,
}
},
]
},

], “tabBar”: {
“custom”: false,
“color”: “#262626”,
“selectedColor”: “#f16600”,
“borderStyle”: “white”,
“backgroundColor”: “#ffffff”,
“list”: [
{
“pagePath”: “pages/home/index”,
“iconPath”: “static/images/sy-icon-off.png”,
“selectedIconPath”: “static/images/sy-icon-on.png”,
“text”: “首页”
},
{
“pagePath”: “pages/info/index”,
“iconPath”: “static/images/wd-icon-off.png”,
“selectedIconPath”: “static/images/wd-icon-on.png”,
“text”: “我的”
}
]
},
“easycom”: {
“autoscan”: true,
“custom”: {
“^uni-(.*)”: “@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue”
}
}
}

似乎 build 之后也找不到，看路径都是对的。。。。

看到你的反馈了，你提到 vue2 处理分包有个报错，后续提供了一部分配置，我尝试用你提供的配置进行复现，不清楚你具体页面如何处理的，我先尝试用简单页面来填充内容，如果可以最好还是直接提供复现工程。提供更多信息有助于定位和修复你的问题

已提供复现工程 ，大概就是 主包引入了分包的 js 文件，分包异步化没有起作用？vue2 是打包成 webpack require 模块了，vue3 vite 模式直接把 Import 变成了 require。出来移动文件夹，还有其他配置方法可以解决吗？

已提供复现工程。

如果运行时拿不到，为什么 build 之后也不行？

忘记复制 这个到 manifest.json 了，试了还是没用。直接改 编译后的文件也不行。

收到你的复现工程了

直接改 编译后的文件也不行。

石沉大海了吗

同问，怎么解？？？？？？？ 主包用不了分包的js，小程序平台又不支持动态加载import，无解啊？？？

在 uni-app 3 中，由于底层架构升级为 Vue 3 和 Vite，原有的分包异步化引入方式可能会遇到兼容性问题。以下是一些可能的原因和解决方案：

1. 检查分包配置

首先，确保你的 pages.json 中的分包配置是正确的。例如：

{
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [
        {
          "path": "pageA",
          "style": {}
        }
      ]
    }
  ]
}

2. 动态引入分包

在 uni-app 3 中，动态引入分包的方式可能需要使用 import() 语法。例如：

import('subpackageA/pageA.js').then(module => {
  // 使用 module
}).catch(err => {
  console.error('加载分包失败:', err);
});

3. 检查 Vite 配置

Vite 的配置可能会影响分包的加载。确保 vite.config.js 中的配置不会影响分包的动态加载。你可以通过以下方式优化 Vite 配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 手动分包配置
          'subpackageA': ['src/subpackageA/pageA.js']
        }
      }
    }
  }
});

4. 检查 Vue 3 的兼容性

Vue 3 的某些特性可能与 uni-app 2 的实现方式不兼容。确保你在 Vue 3 中使用的 API 和生命周期钩子与 uni-app 3 兼容。

5. 调试和日志

如果问题依然存在，可以通过以下方式进行调试：

  • 在控制台查看具体的错误信息。
  • 使用 console.log 或 debugger 语句逐步排查问题。
  • 查看 uni-app 3 的官方文档和社区，看看是否有类似问题的解决方案。

6. 升级 uni-app 版本

确保你使用的是最新的 uni-app 3 版本，因为官方可能会修复一些已知的问题。

7. 社区和官方支持

如果以上方法都无法解决问题，可以尝试在 uni-app 的官方社区或 GitHub 仓库中提问，寻求官方或其他开发者的帮助。

8. 回滚或兼容模式

如果问题无法在短时间内解决，可以考虑暂时回滚到 uni-app 2，或者使用兼容模式来逐步迁移到 uni-app 3。

示例代码

以下是一个简单的示例，展示如何在 uni-app 3 中动态加载分包：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// 动态加载分包
import('subpackageA/pageA.js').then(module => {
  console.log('分包加载成功:', module);
}).catch(err => {
  console.error('分包加载失败:', err);
});

// pages.json
{
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [
        {
          "path": "pageA",
          "style": {}
        }
      ]
    }
  ]
}
回到顶部