vue 2.5 版本集成web3.js的问题处理

taojin12

于 2021-08-28 10:32:58 发布

阅读量1.4k

点赞数 1

分类专栏：智能合约 vue 文章标签： vue.js javascript web3.js

本文链接：https://blog.youkuaiyun.com/taojin12/article/details/119964748

版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

智能合约

2 篇文章

订阅专栏

本文讲述了在Vue 2.5项目中引入web3.js遇到的ES6语法识别问题，并介绍了如何通过配置webpack解决node_modules中的模块识别，以及如何修正CommonJS和ES6模块混用导致的编译错误，确保项目正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 2.5 版本集成web3.js 过程中遇见了下面两个问题：

问题一：项目启动不了，会报识别不了...语法问题

vue 安装web3，babel默认不解析node_modules中内容，导致识别不了ES6语法报错。

问题解决：

在webpack.base.conf 配置文件中国，添加 resolve('node_modules/web3')

//修改webpack.base.conf配置 
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/web3')]
      }

问题二：项目启动后，页面空白，控制台报错如下：

Cannot assign to read only property 'exports' of object

这是因为CommonJS和ES6的import和module.export 混用导致的，需要修改.babelrc 文件。

将.babelrc 文件plugins 的transform-runtime 删除就不会报错了