CLI 工程 uni-app nvue 页面全部白屏 nvue 子构建被 rollup treeshake 摇成空模块(5.0x alpha)

CLI 工程 uni-app nvue 页面全部白屏 nvue 子构建被 rollup treeshake 摇成空模块(5.0x alpha)

项 值
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 26.1 (25B78)
HBuilderX类型 Alpha
HBuilderX版本号 5.08
手机系统 全部
手机厂商 华为
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

HarmonyOS 4.2.0

操作步骤

最小复现(100% 复现)

  1. 新建最小 CLI 工程(vue3),依赖:@dcloudio/uni-app、@dcloudio/uni-app-plus、@dcloudio/uni-h5、@dcloudio/uni-components、@dcloudio/uni-cli-shared、@dcloudio/vite-plugin-uni 均为 3.0.0-alpha-5000820260508001,vue@3.4.21,vite.config.js 仅 uni();
  2. src/pages/test/test.nvue 写一个最小页面:
<template><view class="box"><text class="t">hello nvue</text></view></template>
<script>export default { onLoad(){ console.log('nvue onLoad') } }</script>
<style>.box{flex:1;justify-content:center;align-items:center}.t{font-size:30rpx}</style>

更多关于CLI 工程 uni-app nvue 页面全部白屏 nvue 子构建被 rollup treeshake 摇成空模块(5.0x alpha)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

好的，作为 DCloud 官方人员，我对这份 bug 反馈进行评审，评价其反馈效果。
总体评价：这是一份高质量的 Bug 反馈。
这份反馈清晰地描述了一个在特定 CLI 工程环境下，由于依赖版本冲突导致 nvue 页面构建失败（被 tree-shaking 摇成空模块）并白屏的问题。反馈者提供了非常详尽的环境信息、明确的复现步骤，并且精准地定位了疑似触发条件，这对于我们快速定位和解决问题非常有帮助。

  1. 内容完整性分析
    反馈内容相当完整，具体分析如下：

BUG 标题：清晰明了，直接点出了核心问题“CLI 工程 nvue 页面全部白屏”和可能的原因“被 rollup treeshake 摇成空模块”。
BUG 描述：描述非常详细且专业。不仅描述了“白屏”的表象，还提供了关键的错误日志 No matching export … for import “default”，并且指出了 dist/build/.nvue/… 下产物只剩 import “vue”; 这一关键线索，表明问题出在构建阶段。这让我们能跳过“应用运行报错”的表面现象，直接聚焦到编译打包过程。
代码示例：提供了一个最小化的 nvue 页面代码，结构清晰，可以直接用于验证。这符合最小复现原则，能有效排除业务代码的干扰。
复现步骤：步骤清晰、逻辑严谨，从创建工程、安装依赖到执行构建，每一步都明确无误。特别是第3步中明确指出了 rollup 版本 4.6x 是疑似触发条件，这对我们复现问题至关重要。
预期结果与实际结果：虽然这里填写的是“1”，但这属于非关键信息，不影响对 bug 本身的理解。核心的预期结果是“页面正常显示”，实际结果是“白屏”，这在描述中已经非常清楚。
分类信息：非常完整。提供了完整的版本矩阵，包括 HBuilderX、uni-app 编译器、vite、@vitejs/plugin-vue、Node/npm、OS 等所有关键依赖的版本号，并且特别标注了疑似触发条件的 rollup 版本。项目类型（CLI 工程）也明确给出。

  1. Bug 是否成立分析
    此 Bug 成立。
    根据知识库和对话历史，这个问题的核心原因和解决方案非常明确：

问题根源：这是一个已知的兼容性问题。当 uni-app 的 Vite 编译器（@dcloudio/vite-plugin-uni）与高版本的 Rollup (4.x) 协同工作时，高版本 Rollup 的 tree-shaking 机制可能会错误地将 nvue 页面的入口模块判定为无副作用（side-effect-free），从而将其摇成空模块，导致最终产物缺少必要的导出，触发 No matching export 错误。
知识库依据：

在对话知识库中，用户 Eupotia 和官方人员 DCloud_UNI_JBB 已经讨论过这个问题，并给出了解决方案：通过在 package.json 中配置 pnpm.overrides (或 resolutions 对于 npm/yarn) 来强制指定 rollup 的版本为 4.14.3，以规避此问题。
ask 社区知识库中，[DCloud问答_218961] 和 [DCloud问答_168583] 都记录了完全相同的报错现象和背景，进一步证实了这是一个广泛存在的 CLI 工程问题。

解决方案：正如对话中提到的，这是一个已知的版本兼容性问题，且最新版本的 uni-app 依赖可能已经解决了此问题。因此，对于反馈者，我们建议：

首选方案：将所有 @dcloudio/* 开头的 npm 包更新到最新 alpha 版本。
备选方案：如果更新后问题依旧，可以在 package.json 中锁定 rollup 版本。对于使用 npm 或 yarn 的项目，添加 “resolutions”: { “rollup”: “4.14.3” }；对于使用 pnpm 的项目，添加 “pnpm”: { “overrides”: { “rollup”: “4.14.3” } }。修改后，删除 node_modules 和 lock 文件，重新执行 npm install。

  1. 基本概念问题分析
    该反馈不属于基本概念问题。反馈者对 uni-app 的 CLI 工程、nvue 页面机制、构建工具链（Vite, Rollup, esbuild）都有深入的理解，能够从复杂的构建日志中分析出“tree-shaking”这一根本原因，技术能力很强。
    总结与建议
    这份反馈是 bug 报告的一个典范，信息完整、逻辑清晰、定位精准，可以直接分配给相关开发人员进行处理。开发者无需再与反馈者进行多轮沟通以确认细节，极大地提升了修复效率。
    对于该反馈者，我们非常感谢您的详细报告。您可以通过更新 @dcloudio 相关依赖到最新版本，或使用上述锁定 rollup 版本的方法来解决当前问题。我们会持续关注此兼容性问题，并确保在后续版本中彻底修复。 内容为 AI 生成，仅供参考

更多关于CLI 工程 uni-app nvue 页面全部白屏 nvue 子构建被 rollup treeshake 摇成空模块(5.0x alpha)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为 CLI 工程中 vite-plugin-uni 的 rollup 配置默认会将未显式引用的模块进行 treeshake，而 nvue 页面文件在构建时未被正确识别为入口模块，导致整个子构建被摇成空模块。请在 vite.config.js 中显式阻止对 nvue 文件的 treeshake：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
  build: {
    rollupOptions: {
      preserveEntrySignatures: 'allow-extension',
      treeshake: {
        preset: 'smallest',
        moduleSideEffects: (id) => id.endsWith('.nvue')
      }
    }
  }
});

或更直接：在插件配置中确保 nvue 文件不被过滤：

uni({
  vueOptions: {
    // 无特殊配置
  },
  // 添加 nvue 入口保护
  hooks: {
    'rollup:options': (options) => {
      options.treeshake = {
        ...options.treeshake,
        moduleSideEffects: (id) => id.endsWith('.nvue')
      };
    }
  }
})
回到顶部