mpvue 转移（切换）框架 uni-app

mpuve 已经停止维护很久了，猜测mpvue可能是作为美团一个KPI项目诞生的，框架虽然已经停止维护了，但是公司的项目还是要继续的。为了后期能够更好的维护所以要果断的去切换一个活跃的框架。

uni-app同样是Vue写法，因为vue上手难度低，对于企业来讲更容易进行维护。同时因为大量的vue开发者的涌入，uni-app的社区变得活跃，遇到的问题更方便进行讨论。

所以趁着周末时间把框架更换一下，这里有一些自己踩过的坑，希望看到这篇文章的人 能成功避过。

这里有uni-app官方给的文档，这里不再多做介绍，迁移的时候首先把这篇文章看完。
mpvue项目（组件）迁移指南 ：https://ask.dcloud.net.cn/article/34945

下面所说的 默认你已经完成了官方文档的几个步骤

1、less 和 sass

如果你之前的项目使用的 less 或者 sass 本条有用，否则可以跳过：
uni-app 默认支持less和sass ，但是 首次下载HBuilderX 后 ide需要下载插件 才能支持 ，需要再ide下载
这里用less 做示例
npm install less less-loader --save-dev

2、出现 Component is not found in path 错误

在配置完成 项目运行起来后 微信ide 直接报这个错误的时候

1、首先 你要检测一下 /wxcomponents/vant/ 目录是否填写错误

2、如果路径配置没有问题的话，那么考虑一下你当前的项目是否使用了小程序插件，同时提示小程序组件未注册等提示 。。。这里我使用了微信小程序的直播组件
如果只在 pages.json 中配置了 是不够的的 （这里一定要特别的注意 因为mpvue 只需要在这里配置就够了，这个坑爬了蛮久的）。但是uni-app这样的话就会报上面的这种错误，那么需要在哪里配置呢，请你耐心的往下看：

 "plugins": {
    "live-player-plugin": {
      "version": "1.1.3",
      "provider": "wx2b03c6e691cd7370"
    }
  },

这个时候需要我们找到项目的/src/manifest.json文件 添加插件配置代码

然后重新运行一下 看看是不是就不会报错误了

3、mpvue px 转 rpx 的问题

当上面的问题都解决后，页面显示出来的，但是定睛一看 mmp的这都是些什么 。老子辛苦布局的页面怎么变成一团乱麻了，尺寸全乱了。

这时候不要想着去改代码 把之前的10px改成20rpx或者 20upx。
然后全局搜索 px 替换为 rpx
在manifest.json根节点下，增加"transformPx":false
注意：如此替换升级后，px 恢复为传统的css尺寸单位，不再根据屏幕宽度自动响应。

其实大可不必 uni-app中使用了upx 那么我们可以在运行的时候自动把px转成upx
使用下面命令行 npm install postcss-px2upx -D 添加转换的依赖，
然后在 项目根目录下postcss.config.js 添加代码 即可

require('postcss-px2upx')({
  baseDpr: 1,
  upxUnit: 0.5
}),

如果这里对你有帮助 请点个赞再走吧