walletConnet 在vite react 项目中配置打包使用注意事项
1.首先在本地运行时会有两个情况在浏览器中打开一种就是使用ip访问本地项目,一种是使用localhost 本地主机去访问。当你用ip去访问的话你在链接钱包时,钱包一会一直处于加载中的状态,有的可能没有反应。
这可不是你的网络不好或者FQ导致的,而是walletConnet库在使用ip请求https的内置文件时请求不到所致,你使用localhost 就没有问题了。
2.在你运行的时候,或者打包的时候出现 global buffer process 未定义的时候你加入一下文件内容在main.tsx 或者其他主文件引入。
// global is not defined if (typeof (window as any).global === 'undefined') { (window as any).global = window; } // buffer is not defined import { Buffer } from 'buffer'; if (typeof window !== 'undefined') { (window as any).Buffer = Buffer; } // process is not defined import process from 'process'; if (typeof window !== 'undefined') { (window as any).process = process; }
3.在你辛苦调试完成之后,你以为大功告成的时候,突然打包报错了,或者布到线上控制台直接报错,这个时候浏览器运行代码的时候walletConnet 中有node的语法,vite呢为了简便将兼容的部分去掉了,导致项目浏览器不兼容而报错。这时候需要在vite.config.ts
文件中配置兼容。
export default defineConfig({ ... build:{ commonjsOptions: { transformMixedEsModules: true } }, ... })
这时候打包还是上线基本都OK了。
4.在线上的时候你去扫二维码或者直接打开链接钱包,发现和使用ip打开的时候一样,这是因为你的域名或者ip没有部署ssl https你依然无法链接。这时候你直接访问https 或者强制再次链接就OK了
不停学习,热爱是源源不断的动力。