前言

最近一直在做小程序和app相关项目,于是我就想能否把公司的小程序代码转uniapp代码,结果还真被我找到了解决方案,使用hbuilderx安装一个插件就能实现(那个插件也支持npm,但是我使用npmcli的时候无法正常运行),当我转换后又出来了一个新想法,因为我是linux操作系统,在电脑安装一个hbuilderx很坑第一wine版本hbuilderx不支持小程序预览(无法添加linux兼容版本微信开发者工具到hbuilderx下),第二 那就是wine运行是在太坑了,我12核32G的洋垃圾直接干掉一半性能这谁受得了,于是就着手将转换出来的uniapp版本再转成uniappcli,网络上有很多教程.

参考

原生小程序转uniapp参考:
https://ext.dcloud.net.cn/plugin?id=2656

uniapp转uniapp-cli参考:
https://blog.csdn.net/weixin_45394033/article/details/127908098

症状

yarn dev:mp-weixin
yarn run v1.22.19
$ cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch
Please note that in running mode, due to log output, sourcemap, and uncompressed source code, the performance and package size are not as good as release mode.To officially release, please click the release menu or use the cli release command to release
There are differences in the implementation mechanism of the browser kernels and custom components of each mini-program, and there may be compatibility issues with styles and layouts, please refer to: https://uniapp.dcloud.io/matter?id=mp

⠸  Start to compile the current project to the mp-weixin platform...提示：id is reserved as a property name and is not allowed to be defined as props in custom component canvas2d-ring
at subpackage/pages/group_buying/group_buying.vue:1
提示：id is reserved as a property name and is not allowed to be defined as props in custom component canvas2d-ring
at subpackage/pages/drawing_design/drawing_design.vue:1
⠼  Start to compile the current project to the mp-weixin platform...提示：id is reserved as a property name and is not allowed to be defined as props in custom component canvas2d-ring
at subpackage/pages/calculator_index/fire_control/fire_control.vue:1
⠴  Start to compile the current project to the mp-weixin platform...

 ERROR  Failed to compile with 1 error                                                                                                                        5:12:38 PM

 error  in ./node_modules/mpvue-wxparse/src/wxParse.vue?vue&type=script&lang=js&

Syntax Error: Error: babel-loader find fail


 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

• 报错 ERROR Failed to compile with 1 error

踩坑

我在另外一个公司电脑上移植成功的优化了一些东西,也能正常跑起来,但是当我回到自己公司电脑上git拉下代码,发现安装后死活无法运行,报错Syntax Error: Error: babel-loader find fail,于是各种折腾,最后发现我使用了mpvue-wxpars包,但我也有安装这个包呀,emm折腾了几番后发现我src里面有一个package.json(之前转换的时候没有删除的),于是抱着试一试的心态在src下运行了一下 yarn 然后再回到根目录运行yarn dev:mp-weixin ,居然奇迹搬的运行成功了.

解决方案

如果用到了mpvue-wxpars包可能需要在src目录下进行npm安装