uni-app 微信小程序运行选择混合分包时，在小程序上报 Cannot read property '$vm' of undefined

uni-app 微信小程序运行选择混合分包时，在小程序上报 Cannot read property ‘$vm’ of undefined

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 20H2 HBuilderX 
# 操作步骤：
在原有得小程序上加入了分包，app.json
```json
"subpackages": [
{
"root": "eproPay",
"pages": [
"pages/tabBar/component/component",
"pages/tabBar/API/API"
],
"independent": true
}
]

预期结果：

正常运行

实际结果：

报错Cannot read property ‘$vm’ of undefined。

bug描述：

在原有的微信小程序上使用独立分包，该分包是用HBuilderX的混合分包模式运行生成的，uni-app开发的，迁入微信小程序后，打开分包的页面报错Cannot read property ‘$vm’ of undefined。 该项目是直接采用helloWord模板生成，未做任何修改。

mp-weixin.rar


更多关于uni-app 微信小程序运行选择混合分包时，在小程序上报 Cannot read property '$vm' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序运行选择混合分包时，在小程序上报 Cannot read property '$vm' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误通常是由于独立分包中的页面没有正确加载 Vue 实例导致的。在 uni-app 的混合分包模式下，独立分包需要单独初始化 Vue 运行时环境。

主要原因：

  1. 独立分包作为独立的小程序包，需要独立的 Vue 实例初始化
  2. 主包和分包之间的 Vue 实例是隔离的
  3. 在独立分包中访问了未正确初始化的 Vue 实例

解决方案：

  1. 检查分包配置： 确保 independent: true 只用于真正的独立分包，如果分包需要与主包共享资源，不应该设置为独立分包。

  2. 检查页面引入： 在独立分包的页面中，确保正确引入了必要的 uni-app 运行时文件：

// 在独立分包页面的入口文件（如 main.js）中
import Vue from 'vue'
import App from './App'

// 初始化 Vue 实例
const app = new Vue({
  ...App
})
app.$mount()
  1. 检查 manifest.json 配置： 在 manifest.json 的微信小程序配置中，确认分包配置正确：
{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    }
  }
}
  1. 重新编译运行：
  • 删除 unpackage 目录
  • 清理微信开发者工具缓存
  • 重新编译运行项目
  1. 如果问题依旧，尝试：
  • 将 independent: true 改为 false 测试是否为独立分包导致的问题
  • 检查分包页面中是否有全局混入（mixins）或插件依赖主包的 Vue 实例

临时解决方案： 在独立分包页面的 onLoad 生命周期中添加错误捕获：

onLoad() {
  try {
    // 页面代码
  } catch (error) {
    console.error('页面加载错误:', error)
  }
}
回到顶部