uni-app vue3项目 正式版本打包报错

uni-app vue3项目 正式版本打包报错

示例代码：

<script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";
let goback = () => {
// @ts-ignore
uni.webView.switchTab({
url: "/pages/layouts/layouts",
});
console.log("跳回首页");
};
</script>  
<template>
<div id="hello">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
<HelloWorld msg="Vite + Vue" />
<button @click="goback">返回上一页</button>
</div>
</template>  
<style scoped>
hello{
font-size: 14px !important;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

操作步骤：

  • layouts页面的点击查看题目跳转页面， 在查看题目的页面点击返回上一页就报错，返回不了

预期结果：

  • 返回到layouts页面

实际结果：

  • 无法回到layouts页面

bug描述：

  • 本地运行正常，打包后部署到线上报错 uni[e] is not a function；
  • 报错的页面的web-view内嵌的另外一个项目的vue页面，页面引入了uni.webview.1.5.5.js，调用 navigateTo、redirectTo、reLaunch、switchTab、navigateBack 这几个API时报错；
  • uniapp 项目的代码在附近里
开发环境 版本号 项目创建方式
Windows w10 HBuilderX

Download Test File


更多关于uni-app vue3项目 正式版本打包报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

你给打包之后的代码谁能看的出来，这都是loader编译处理的代码了

更多关于uni-app vue3项目 正式版本打包报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已改为项目的代码

你环境的原因，用你的代码这边测试正常

我本地也是正常的，部署到线上就报错

回复 健辉: 这样吗 我用个服务器试下

回复 健辉: 好像确实不行，h5运行在本地正常，包括基座包运行到手机端也能正常返回 。https://static-mp-1f1e8af1-5742-410d-8ccd-9453c8fae16d.next.bspapp.com/web#/

回复 困难总比办法多: 无法解决吗？

应该和这个差不多https://ask.dcloud.net.cn/question/169706

在 uni-app 项目中，使用 Vue 3 进行正式版本打包时遇到报错，可能是由于多种原因引起的。以下是一些常见的排查步骤和解决方案：

1. 检查依赖版本

确保你的 uni-app 和 Vue 3 的依赖版本是兼容的。你可以通过以下命令检查当前安装的版本：

npm list @dcloudio/uni-app
npm list vue

如果版本不兼容，可以尝试更新或降级相关依赖。例如：

npm install @dcloudio/uni-app@latest
npm install vue@3

2. 检查 manifest.json 配置

在 manifest.json 文件中，确保 vueVersion 配置为 3：

{
  "vueVersion": "3"
}

3. 检查 vue.config.js 配置

如果你有自定义的 vue.config.js 文件，确保配置正确。例如：

module.exports = {
  configureWebpack: {
    // 自定义配置
  }
};

4. 检查代码中的兼容性问题

Vue 3 与 Vue 2 在某些 API 上有差异，确保你的代码中没有使用 Vue 2 特有的 API。例如：

  • Vue 2 中的 Vue.set 和 Vue.delete 在 Vue 3 中不再需要。
  • Vue 3 中的 ref 和 reactive 是新的响应式 API。

5. 清理缓存并重新安装依赖

有时候缓存可能会导致打包问题，可以尝试清理缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules
npm install

6. 检查打包命令

确保你使用的打包命令是正确的。例如，uni-app 的正式版本打包命令通常是：

npm run build:mp-weixin

或者

npm run build:app-plus

7. 查看详细报错信息

如果上述步骤无法解决问题，可以查看详细的报错信息。通常打包时会在终端输出详细的错误日志，根据这些日志信息可以进一步定位问题。

8. 检查组件库兼容性

如果你使用了第三方组件库（如 uView、vant 等），确保这些组件库支持 Vue 3。有些组件库可能需要安装特定的 Vue 3 版本。

9. 检查 babel 配置

确保 babel 配置正确，支持 Vue 3。你可以检查 babel.config.js 文件：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
};

10. 检查 webpack 配置

如果你有自定义的 webpack 配置，确保它不会导致打包问题。你可以尝试暂时移除自定义配置，看看问题是否依然存在。

11. 使用 uni-app 官方社区

如果问题依然无法解决，可以到 uni-app 官方社区或 GitHub 仓库中搜索相关问题，或者提交一个新的 issue 寻求帮助。

12. 调试模式

尝试在调试模式下运行项目，看看是否有更多的错误信息输出：

npm run dev:mp-weixin
回到顶部