uni-app h5打包后挂载到globalThis上的uni为空

uni-app h5打包后挂载到globalThis上的uni为空

想把uni暴露再全局上，globalThis.uni=uni，打包后发现globalThis下的uni为空，这是为什么呢

2 回复

已解决，需要关闭h5的树摇模式。 “h5” : {
“router” : {
“base” : “./”
},
“optimization” : {
“treeShaking” : {
“enable” : false
}
}
},

更多关于uni-app h5打包后挂载到globalThis上的uni为空的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中，当你将项目打包为 H5 后，uni 对象是 UniApp 提供的一个全局对象，用于调用各种 API。如果你在打包后发现挂载到 globalThis 上的 uni 对象为空，可能是由于以下原因之一：

1. 打包配置问题

确保你的 manifest.json 文件中正确配置了 H5 相关的设置。检查 h5 节点下的配置，确保没有遗漏或错误的配置项。

{
  "h5": {
    "template": "public/index.html",
    "router": {
      "mode": "history"
    }
  }
}

2. 挂载时机问题

确保你在正确的时机访问 uni 对象。在 H5 环境中，uni 对象可能需要在页面加载完成后才能正确挂载。你可以在 mounted 生命周期钩子中访问 uni 对象，以确保它已经被正确初始化。

export default {
  mounted() {
    if (typeof uni !== 'undefined') {
      console.log('uni is available:', uni);
    } else {
      console.error('uni is not available');
    }
  }
}

3. 全局变量污染

如果你在项目中使用了某些第三方库或自定义代码，可能会不小心覆盖了 globalThis 上的 uni 对象。检查你的代码，确保没有对 globalThis.uni 进行重新赋值或覆盖。

4. UniApp 版本问题

确保你使用的是最新版本的 UniApp。旧版本可能存在一些 bug，升级到最新版本可能会解决这个问题。

npm update [@dcloudio](/user/dcloudio)/uni-app

5. H5 环境判断

确保你在正确的环境中使用 uni 对象。你可以通过 process.env.VUE_APP_PLATFORM 来判断当前运行的环境。

if (process.env.VUE_APP_PLATFORM === 'h5') {
  console.log('Running in H5 environment');
  if (typeof uni !== 'undefined') {
    console.log('uni is available:', uni);
  }
}

6. 手动挂载

如果以上方法都无法解决问题，你可以尝试手动将 uni 对象挂载到 globalThis 上，以确保它可用。

if (typeof uni !== 'undefined') {
  globalThis.uni = uni;
}

7. 检查控制台错误

打开浏览器的开发者工具，检查控制台是否有任何错误或警告信息。这些信息可能会帮助你找到问题的根源。

8. 重新打包

有时候，打包过程中可能会出现一些不可预见的问题。尝试删除 dist 目录并重新打包，看看问题是否依然存在。

rm -rf dist
npm run build:h5
回到顶部