uni-app vue3使用pnpm安装依赖，配置tabBar后页面无法渲染

uni-app vue3使用pnpm安装依赖，配置tabBar后页面无法渲染

示例代码：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "about",
        "enablePullDownRefresh": false
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#333333",
    "selectedColor": "#330",
    "backgroundColor": "#F8F8F8",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}

操作步骤：

下载 uni-preset-vue-vite 模板并用 pnpm 安装依赖，新增 about 页面，配置 page.json，运行 pnpm run dev:h5

预期结果：

浏览器不报错，页面能正常渲染

实际结果：

浏览器报错：TypeError: Cannot assign to read only property ‘_’ of object ‘#<Object>’，页面无法渲染

bug描述：

使用 pnpm（版本 10.5.2） 为 uni-preset-vue-vite 安装依赖后，配置 tabBar 后 web 页面无法渲染，浏览器报错如下：

TypeError: Cannot assign to read only property '_' of object '#<Object>'
at assign (<anonymous>)
at updateSlots (vue.runtime.esm.js:5848:9)
at updateComponentPreRender (vue.runtime.esm.js:7518:5)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm.js:7433:11)
at ReactiveEffect.run (vue.runtime.esm.js:180:19)
at instance.update (vue.runtime.esm.js:7500:16)
at updateComponent (vue.runtime.esm.js:7308:18)
at processComponent (vue.runtime.esm.js:7242:7)
at patch (vue.runtime.esm.js:6699:11)
at patchKeyedChildren (vue.runtime.esm.js:7653:9)
信息项 描述
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 windows11
浏览器平台 Edge
浏览器版本 138.0.3351.65
项目创建方式 CLI
CLI版本号 11.1.0

更多关于uni-app vue3使用pnpm安装依赖，配置tabBar后页面无法渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

您好，麻烦发个可复现demo

更多关于uni-app vue3使用pnpm安装依赖，配置tabBar后页面无法渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传压缩包

demo 如下

测试并没有报错

可能是仓储的问题，之前用 https://registry.npmmirror.com/ 的资源产生上面报错，现在换成 npm 官方的 https://registry.npmjs.org/ 后就没问题了

这是一个已知的 pnpm 与 Vue 3 的兼容性问题。pnpm 的严格依赖管理可能导致 Vue 内部响应式系统出现冲突，特别是当多个 Vue 实例或版本共存时。

解决方案：

  1. 在 package.json 中添加 pnpm 配置：
{
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": ["@vue/composition-api"]
    }
  }
}
  1. 清理并重新安装依赖：
rm -rf node_modules
pnpm install
  1. 如果问题仍然存在，尝试使用 npm 或 yarn 安装依赖：
rm -rf node_modules pnpm-lock.yaml
npm install
回到顶部