Vite usa web3, walletConnect informa un error

Debido a que web3 se ejecuta en otros entornos (como webpack, @vue/cli), ellos mismos descargarán algunos paquetes dependientes y vite eliminará los paquetes innecesarios, por lo que no tiene Buffer global o process.env

Si desea ejecutar en el entorno vite, el paquete importado debe cambiarse a

import Web3 from 'web3/dist/web3.min.js'

Enlace de referencia: GitHub - ChainSafe/web3.js: Ethereum JavaScript API

Puede configurar vite.config.js para establecer el alias web3 en 'web3/dist/web3.min.js', de modo que pueda importar directamente web3

=====================

La dirección de la biblioteca web3 y la biblioteca ethersjs son las mismas

En comparación con web3, la implementación de ethers es más adecuada para principiantes y la demolición es más detallada

Así que te sugiero que uses la biblioteca ethersjs

éteres.js

Qué es ethers.js — documentación de ethers.js 3.0.0

web3.js

Introducción — documentación de Web3.py - 5.29.2

 ================================

Al usar walletConnector, se informará un error que global no está definido

Consulte el sitio web oficial, porque walletConnetor aún depende de muchos paquetes del entorno operativo nodejs

Esta solución también puede solucionar el error que web3 no tiene globalmente

Descarga el paquete @esbuild-plugins/node-globals-polyfill

añadir hilo -D @esbuild-plugins/node-globals-polyfill

añadir hilo -D stream-browserify

yarn add -D crypto-browserify
// o descarga con npm

npm install -D @esbuild-plugins/node-globals-polyfill

npm install -D stream-browserify

npm install -D crypto-browserify

 Luego configúralo en vite.config.js

import { defineConfig } from 'vite'

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

//if you're using a create-vite framework template, you can also 
//import the vite plugin for that specific framework and add it in vite.config.js
//for more support. 
//For example, for vite.js react-ts template, you need to:
//import react from '@vitejs/plugin-react'
// and then add plugins: [react()] below

export default defineConfig({
  resolve: {
    alias: {
      stream: "stream-browserify",
      crypto: 'crypto-browserify',
      assert: 'assert'
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis",
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
      ],
    },
  },
});

referencia

Núcleo - Documentación de Blocknative

Personalmente, creo que este tipo de configuración sigue siendo demasiado problemática, por lo que debemos saber por qué necesita el paquete nodejs y qué debemos hacer si nos encontramos con este tipo de problema en el futuro. ¿Lees mis artículos todo el tiempo?

Pensémoslo detenidamente, ¿por qué el proyecto front-end web necesita el paquete nodejs, no es divertido?

Debido a que el entorno que generalmente desarrollamos es un entorno de tiempo de ejecución, puede entenderse como un entorno en el que se realizarán varias compilaciones desordenadas durante el proceso de ejecución.

Pero de hecho, lo que necesita nuestro entorno web es muy simple, que es el archivo .js final, porque solo podemos ejecutar archivos .js

Entonces, solo necesitamos verificar el módulo js final en su biblioteca, puede ir directamente a node_modules/xxx para encontrar que .min.js es el archivo compilado que finalmente empaquetó (generalmente lo habrá, no más)