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了

posted @ 2022-11-07 18:12  小不点灬  阅读(501)  评论(0编辑  收藏  举报