解决uni-app编译抖音小程序时common_vendor报错问题

问题背景

在使用uni-app开发跨平台应用时，开发者可能会遇到一个特定于抖音小程序的编译错误。当项目在微信小程序上运行正常，但在抖音小程序上却出现以下报错：

[TMA] TypeError: Cannot set properties of undefined (setting 'createApp')
[TMA] TypeError: common_vendor.defineStore is not a function
[TMA] TypeError: common_vendor.defineComponent is not a function
tma-core.js:2 [TMA] TypeError: Cannot read properties of undefined (reading 'getSystemInfoSync')

问题分析

这个问题的根源在于不同小程序平台对JavaScript全局对象的支持差异。具体表现为：

1. 全局对象访问差异：抖音小程序环境无法识别globalThis和self，导致代码中尝试通过这些方式访问全局对象时返回undefined

2. vendor.js生成差异：在正常项目中，代码会直接使用global对象：

   tt.createApp = global.createApp = createApp;
   

   但在有问题的项目中，代码尝试通过globalThis访问：

   const global$1 = globalThis || void 0 || self;
   tt.createApp = global$1.createApp = createApp;
   

3. polyfill影响：当项目中使用了某些polyfill库（如vite-plugin-node-polyfills）时，可能会覆盖或干扰原有的全局对象访问方式

解决方案

方法一：检查并移除冲突的polyfill

1. 检查项目依赖中是否包含vite-plugin-node-polyfills或其他类似polyfill库
2. 如果这些polyfill不是项目必需的，可以考虑移除它们
3. 如果必须使用，需要配置这些polyfill不处理global对象

方法二：修改编译配置

1. 在uni-app配置文件中明确指定全局对象访问方式
2. 确保编译时使用适合抖音小程序的全局对象访问策略

方法三：环境检测与适配

1. 在代码中添加平台检测逻辑
2. 针对抖音小程序使用特定的全局对象访问方式

预防措施

1. 跨平台测试：在开发过程中定期在不同平台（特别是目标平台）上进行测试
2. 谨慎使用polyfill：添加polyfill时要充分了解其影响范围
3. 关注uni-app更新：及时更新uni-app版本，获取最新的平台适配修复

总结

这个问题的本质是不同JavaScript运行环境对全局对象支持的差异导致的。在uni-app跨平台开发中，特别是在抖音小程序这样的新兴平台上，开发者需要特别注意环境差异带来的兼容性问题。通过合理的配置和代码适配，可以确保应用在各个平台上都能稳定运行。

对于遇到类似问题的开发者，建议首先检查项目中是否有不必要或冲突的polyfill，然后考虑针对特定平台进行适配，最后保持uni-app框架本身的及时更新。