uniapp hBuilderX 4.76 uniapp vue2版编译到WEB端如果全局混入mixin包含名为showToast的方法则控制台会报错

uniapp hBuilderX 4.76 uniapp vue2版编译到WEB端如果全局混入mixin包含名为showToast的方法则控制台会报错

示例代码：

import App from './App';

// #ifndef VUE3
import Vue from 'vue';
import './uni.promisify.adaptor';
Vue.config.productionTip = false;
App.mpType = 'app';

// 全局混入showToast，控制台报错
let mixin = {
methods: {
showToast: function () {
console.log('====== showToast');
}
}
};
Vue.mixin(mixin);

const app = new Vue({
...App
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
const app = createSSRApp(App);
return {
app
};
}
// #endif

操作步骤：

使用uniapp 创建一个vue2项目，在app.vue文件中，写入一个包含showToast方法名的全局混入mixin

预期结果：

所有端不报错

实际结果：

WEB端报 Method “showToast” has already been defined as a data property。其他端无问题

bug描述：

我们是一个hbuilderX 4.76正式版 uniapp vue2的微信小程序项目，当做WEB端适配时，控制台会报[Vue warn]: Method showToast has already been defined as a data property错。进一步发现创建一个新的vue2项目，如果全局混入包含名为 showToast 的方法，WEB端的控制台会报错，微信小程序端，APP安卓端不会报错。

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例图片 示例图片


4 回复

换个函数名就不报错了，他这里初始化会加这个字段导致的报错


我这是老的微信项目，要做WEB端适配，新项目到无所谓

回复 3***@qq.com: 全局做一下替换吧，这东西不可能给你优化的

这是因为在uni-app的Web平台编译中，showToast方法名与uni-app内置的API名称冲突导致的。

在uni-app的Web平台实现中，showToast被定义为Vue实例的data属性，而你的全局mixin也定义了同名方法，导致Vue检测到重复定义而报错。

解决方案：

  1. 重命名方法（推荐） 将全局mixin中的showToast改为其他名称，避免与uni-app内置API冲突：
let mixin = {
  methods: {
    customShowToast: function () {
      console.log('====== customShowToast');
    }
  }
};
  1. 使用条件编译 仅在非Web平台使用该mixin：
// #ifndef H5
Vue.mixin(mixin);
// #endif
回到顶部