返回

升级mpvue踩过的坑

前端

从mpvue1.x升级到mpvue2.x后，在开发中遇到了很多报错，在此分享一下踩过的坑，希望对其他开发者有所帮助。

1. 安装依赖报错

在安装依赖时，可能会遇到如下报错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: mpvue@2.10.1
npm ERR! Found: vue-router@3.5.4
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"^3.0.2" from the root project
npm ERR!   peer vue-router@"^3.1.0" from mpvue@2.10.1
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue-router@"^3.1.0" from mpvue@2.10.1
npm ERR! node_modules/mpvue
npm ERR!   mpvue@"2.10.1" from the root project
npm ERR! 
npm ERR! Fix the above dependency tree

解决方案：

将package.json中的vue-router版本号升级到^3.1.0或更高。

"vue-router": "^3.1.0"

2. 编译报错

在编译时，可能会遇到如下报错：

ERROR in ./node_modules/mpvue-validator/dist/index.js 15:20-26
Module not found: Error: Can't resolve 'unfetch' in '.../node_modules/mpvue-validator/dist'

解决方案：

将package.json中的unfetch版本号升级到1.1.2或更高。

"unfetch": "^1.1.2"

3. 运行报错

在运行时，可能会遇到如下报错：

Cannot read property 'commit' of undefined

解决方案：

在app.vue文件中，将store属性改为$store。

data() {
  return {
    $store
  }
}

4. 性能优化

在升级mpvue之后，可能会发现性能有所下降。这是因为mpvue2.x使用了新的编译器，导致代码体积有所增加。为了优化性能，可以做以下几件事：

  • 使用tree-shaking优化代码。
  • 使用cdn加速加载静态资源。
  • 使用压缩工具压缩代码。

5. 兼容性处理

在升级mpvue之后，可能会发现一些旧的代码无法正常运行。这是因为mpvue2.x对一些API进行了修改。为了兼容旧的代码，可以做以下几件事：

  • 使用mpvue提供的兼容性库。
  • 手动修改旧的代码，使其符合mpvue2.x的语法和API。

希望本文对大家有所帮助。如果您在升级mpvue时遇到其他问题，欢迎在评论区留言。