uni-app vue3.0 发布h5失败

uni-app vue3.0 发布h5失败

操作步骤：

uni-app vue3.0 引用自定义组件后发布h5失败

预期结果：

uni-app vue3.0 引用自定义组件后发布h5失败

实际结果：

uni-app vue3.0 引用自定义组件后发布h5失败

bug描述：

import {
defineComponent,
reactive,
toRefs,
onMounted,
computed
} from "vue"
import store from "@/store/index.js"
import api from "@/http/index.js"
import popMsg from "@/util/toast.js"
import detailCard from "@/components/detailCardPanel.vue"

引入组件 detailCard 后 本地调试运行没有问题，发布h5 提示错误  
[HBuilder] 09:20:01.006 [vite:vue] Could not load D:/PlantMarge/Wechart/Wechart3_0/components/detailCardPanel.vue?vue&type=style&index=0&scoped=true&lang.scss (imported by D:\PlantMarge\Wechart\Wechart3_0\components\detailCardPanel.vue): D:/PlantMarge/Wechart/Wechart3_0/components/detailCardPanel.vue has no corresponding SFC entry in the cache. This is a @vitejs/plugin-vue internal error, please open an issue.
[HBuilder] 09:20:01.007 error during build:
[HBuilder] 09:20:01.013 Error: Could not load D:/PlantMarge/Wechart/Wechart3_0/components/detailCardPanel.vue?vue&type=style&index=0&scoped=true&lang.scss (imported by D:\PlantMarge\Wechart\Wechart3_0\components\detailCardPanel.vue): D:/PlantMarge/Wechart/Wechart3_0/components/detailCardPanel.vue has no corresponding SFC entry in the cache. This is a @vitejs/plugin-vue internal error, please open an issue.
[HBuilder] 09:20:01.013 at getDescriptor (E:\HBuilderX.2.7.9.20200527.full\HBuilderX\plugins\uniapp-cli-vite\node_modules\@vitejs\plugin-vue\dist\index.js:4131:11)
[HBuilder] 09:20:01.015 at Object.load (E:\HBuilderX.2.7.9.20200527.full\HBuilderX\plugins\uniapp-cli-vite\node_modules\@vitejs\plugin-vue\dist\index.js:4694:28)
[HBuilder] 09:20:01.016 at E:\HBuilderX.2.7.9.20200527.full\HBuilderX\plugins\uniapp-cli-vite\node_modules\rollup\dist\shared\rollup.js:20173:25
```

更多关于uni-app vue3.0 发布h5失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3.0 发布h5失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据错误信息，这是Vite构建时@vitejs/plugin-vue插件内部缓存问题导致的。该错误通常发生在组件路径包含特殊字符或构建缓存异常时。

解决方案：

  1. 清理构建缓存

    • 删除项目根目录下的 node_modules/.vite 文件夹
    • 删除 unpackage 文件夹
    • 重新运行 npm install 或 yarn install
    • 重新构建H5

  2. 检查组件路径和名称

    • 确认组件文件名 detailCardPanel.vue 没有特殊字符
    • 尝试将组件重命名为纯英文名称（如 DetailCardPanel.vue）
    • 确保组件路径没有中文或特殊符号

  3. 检查组件内部样式

    • 打开 detailCardPanel.vue 组件
    • 检查 <style> 标签是否使用了 scoped 和 lang 属性
    • 如果是 lang="scss"，确保已安装 sass 依赖

  4. 临时解决方案

    • 在 vue.config.js 或 vite.config.js 中添加配置：
    export default defineConfig({
  plugins: [
    vue({
      cache: false // 禁用缓存
    })
  ]
})

  5. 更新依赖版本

    • 检查 [@vitejs](/user/vitejs)/plugin-vue 版本
    • 更新到最新稳定版：npm update [@vitejs](/user/vitejs)/plugin-vue

  6. 重新注册组件

    • 尝试在父组件中改用动态导入：
    const detailCard = defineAsyncComponent(() => 
  import('@/components/detailCardPanel.vue')
)
回到顶部