虽然vue3已经有了很好的开发体验，但是目前的存量项目中，仍然有很多vue2的项目需要维护，这不得不让人英雄气短，明明有开高铁的技术，却要去赶牛车。不过饭还得恰，打工挣钱嘛，不寒颤！吐槽完毕，下面的问题：

有一个vue-element-admin的后台项目需要加入与metamask的交互，发起交易。考虑到后期可能有的渠道扩展，wagmi是比较好的选择，可以支持主流的metamask，walletconect，coinbase之类的主流钱包，而且配置灵活。

之前在vue3+ts的环境中，安装到使用，一切都如呼吸一样自然顺滑，我本以为这样的日子会一直持续，直到那天，我看见了那个三千多行的.vue文件，人类再次回想不组件化开发的屈辱….

问题1：安装后，引用报语法错误问题

情况就是当你安装之后，你会发现你根本无法启动项目，因为默认情况下，babel-loader会忽略所有node_modules的文件，而wagmi的dist之后的文件是es6的语法，所以这里需要在vue.config.js里面加入本地如下配置 transpiledependencies，使之可以转换，注意这里需要使用npm install，不要使用yarn，或者pnpm，cnpm之类的奇淫巧技

1
2
3
4

module.exports = {
  transpileDependencies:['@wagmi','viem','ethers'],
  ...
}

这里etherjs也需要配置，当然如果你需要使用到的话。

ok，你以为一切完事大吉，可以开心的开发，然后顺利按时下班了？ to yang too simple！

问题2：构建交易Cannot convert a BigInt value to a number报错

当你去构建交易的时候，会提示你"TypeError: Cannot convert a BigInt value to a number"，此时你需要在package.json配置

1
2
3
4
5
6

"browserslist": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 2 safari version",
    "last 2 edge version"
  ],

配置说明，chatgpt如是说：

1
2
3
4
5
6
7
8
9
10

在package.json文件中的"browserslist"配置是用来指定项目所支持的浏览器版本范围。这个配置项通常用于前端开发中，特别是在构建和打包过程中，用于确定需要兼容的浏览器范围。

在上述例子中，"browserslist"配置指定了项目所支持的浏览器版本范围，具体如下：

-   "last 2 chrome version"：表示支持最近两个版本的Chrome浏览器。
-   "last 2 firefox version"：表示支持最近两个版本的Firefox浏览器。
-   "last 2 safari version"：表示支持最近两个版本的Safari浏览器。
-   "last 2 edge version"：表示支持最近两个版本的Edge浏览器。

这些配置项可以根据项目的需求进行自定义，可以指定特定的浏览器版本、操作系统、或者使用特定的语法和功能。这样，在构建和打包过程中，相关工具（如Babel、Autoprefixer等）会根据这个配置来自动转译和添加浏览器兼容性前缀，以确保项目在指定的浏览器范围内正常运行。

关于 BigInt 类型。

这样基本上就可以顺利的在admin的项目中运行起来wagmi交互了。至于wagmi的具体使用与交互细节，点个赞，下篇再说吧…..