uni-app cli nvue pinia编译到h5预览时的问题

uni-app cli nvue pinia编译到h5预览时的问题

开发环境 版本号 项目创建方式
Windows win10 CLI
Chrome 98
CLI 3.0.0-alpha-3040720220422003

示例代码：

正常按照官方教程安装和使用pinia

操作步骤：

编译预览到h5后。
在页面上的子组件或者其它页面组件中多冷保存修改保存，基本上就会触发上述问题，导致页面一片空白，报上述错误日志。

预期结果：

正常预览编译h5页面

实际结果：

空白。

报正文日志：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-demi.js?v=e57f67d4' does not provide an export named 'computed' (at pinia.mjs:6:163)

bug描述：

正常编译到h5预览。在h5预览时，经常出现：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-demi.js?v=e57f67d4' does not provide an export named 'computed' (at pinia.mjs:6:163)

如上述日志。导致页面空白。
注意：除了h5其它所有平台端测试均正常！！！

我的环境为：
cli:3.0.0-alpha-3040720220422003
Nvue页面编译到h5预览，热更新导致的问题。估计有缓存，如果我想让问题消失需要删除，重新install 插件再编译就正常了，但是热更新修改又有机率触发，触发概率高，原因不明。
vite:2.9.5
pinia:2.0.13
具体pagjson插件见附件。

更多关于uni-app cli nvue pinia编译到h5预览时的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

新的版本还没有修复，具体复现如下： 如果我导入如下语句： import { … } from ‘vue-demi’; 出错，h5空白。为什么是：vue-demi。我解释下。vscode默认是这个包，我知道这是错的。我保存，然后报错。 接着我修改成如下正确的语句： import { … } from ‘vue’; 此时：不管如何保存修复。h5预览始终是空白，就算我重新编译也不行。但其它平台正常。 解决方法是：删除node_modules后，重新Install下再编译就正常了。 截止到目前cli版本号，该体验问题仍然存在。

更多关于uni-app cli nvue pinia编译到h5预览时的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用VUEX呢，用VUEX感觉还可以的

pinia有vuex无法替代的优势在,在ts 下，pinia的代码提示超强。而vuex无能为力，或者说很复杂的配置或者设置。

回复 tmui: 哦，可能我项目比较小，体会不到pinia的好，你问题这么多要不赞助下uniapp团队，10块钱也是爱啊

回复 iehong: 我在写组件框架，因此发现的bug比较多，我项目上没用。这好像跟赞助没有必然的关系。他们修不修复，随便他们。我只提问题，至于能不能修复，我无能为力。提bug也是对它他的贡献。如果我不提早晚会有人遇到。

遇到同样问题 请问是官方问题吗 如果是官方问题还请官方早日解决

我和他们官方的QQ人员提了。但他们没作任何回复。估计一时半会是无法修复的。你要是不小心出错就，重新npm install吧。没有办法。

回复 tmui: vue3 版本很多bug 搞NVUE就是更多更多BUG了

nvue我已经用回VUE2版本了

这个到现在还有这个问题，官方不下场么？

在使用 uni-app CLI 开发应用时，如果你使用了 nvue 和 Pinia，并且在编译到 H5 预览时遇到问题，以下是一些可能的原因和解决方案：

1. Pinia 在 H5 环境中的兼容性问题

  • 问题描述: Pinia 是一个 Vue 3 的状态管理库，但在 H5 环境中，可能会因为某些 API 的差异或依赖问题导致无法正常工作。
  • 解决方案:
    • 确保你使用的是最新版本的 Pinia 和 uni-app。
    • 检查你的 Pinia 配置是否正确，尤其是在 main.js 或 main.ts 中的初始化代码。
    • 如果你使用了 Pinia 的插件或中间件，确保它们在 H5 环境中也是兼容的。

2. nvue 页面的兼容性问题

  • 问题描述: nvue 是 uni-app 中用于原生渲染的页面类型，但在 H5 环境中，nvue 页面的表现可能与原生端有所不同。
  • 解决方案:
    • 如果你在 nvue 页面中使用了某些原生组件或 API，确保这些组件或 API 在 H5 环境中也有对应的实现。
    • 如果 nvue 页面在 H5 中无法正常渲染，考虑使用 vue 页面作为替代，或者通过条件编译来区分不同平台的代码。

3. 编译配置问题

  • 问题描述: 在编译到 H5 时，可能会因为某些配置问题导致 Pinia 或 nvue 无法正常工作。
  • 解决方案:
    • 检查 vue.config.js 或 manifest.json 中的配置，确保没有错误的配置项。
    • 如果你使用了自定义的 Webpack 配置，确保这些配置在 H5 环境中也是有效的。

4. 依赖冲突

  • 问题描述: 项目中可能存在依赖冲突，导致 Pinia 或 nvue 在 H5 环境中无法正常工作。
  • 解决方案:
    • 使用 npm 或 yarn 的 dedupe 命令来检查并解决依赖冲突。
    • 确保所有依赖的版本都是兼容的，尤其是 Vue、Pinia 和 uni-app 的版本。

5. 调试与日志

  • 问题描述: 在 H5 环境中，可能因为某些错误没有及时捕获或日志输出不完整，导致问题难以定位。
  • 解决方案:
    • 使用浏览器的开发者工具（如 Chrome DevTools）来调试 H5 页面，查看控制台输出和网络请求。
    • 在代码中添加更多的日志输出，尤其是在 Pinia 的初始化和状态更新过程中。

6. 条件编译

  • 问题描述: 某些代码可能只在特定平台下有效，但在 H5 环境中没有正确处理。
  • 解决方案:
    • 使用 uni-app 的条件编译功能，确保不同平台的代码能够正确执行。例如：
      // #ifdef H5
console.log('This is running in H5');
// #endif
回到顶部