vue2升vue3，uniapp兼容鸿蒙app踩坑记录

前提：最近鸿蒙势头很好，公司的 uniapp vue2 项目，要兼容鸿蒙app。就开始了我的uniapp转鸿蒙踩坑之旅，请看下文（注意下文都是在uniapp开发基础上）

1. 首先鸿蒙开发只支持Vue3，不支持Vue2、不支持plus、但支持nvue。所以，新建vue3项目。

我自己是新建一个vue3空白项目，在原vue2项目中复制相关文件到vue3中去，进行兼容性调整修改。

2. 下载鸿蒙模拟器，参考uniapp官网，注意事项，在下载前，关闭杀毒软件！再下载。

运行和发行 | uni-app官网 (dcloud.net.cn)

3. 如何将uniapp项目运行到鸿蒙模拟器 （顺序不能颠倒！！！）

3.1  HBuilder X 配置，点击顶部工具，点击设置，打开源码视图

在用户设置中增加 ，如下图

"harmony.devTools.path" : "你的鸿蒙模拟器安装路径" 

3.2 下载模版，地址下

 https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz

3.3  将你下载的模版，复制一份到你的vue3项目根目录下，如下图（我改了个名字，改成了hmpackage）

3.4  打开鸿蒙模拟器，导入你vue3项目根目录的那个模版，如下

导入后，一定等待 sync 后再操作，右下角有个进度条，完成后进度条消失

3.5  真机调试，右上角，点击设备管理器，如果没有模拟器，下载一个。点击运行，等待开机。

开机后，右上角就有了一个华为手机

3.6  配置签名，点击文件，打开项目结构，点击 Signing Configs，然后登录（sign in）

（如果项目结构页面为空，请参考鸿蒙模拟器，deveco studio中 project Structure 空白解决方式_deveco studio创建项目白屏-CSDN博客）

登录后，两个框勾选上，会自动生成签名，点击应用（apply），然后ok

3.7  打开你的vue3项目，点击运行到鸿蒙模拟器（不要运行到内置浏览器！！！！，会报错的！！），如果没有这个选项，参考3.1，看看路径对不对呢

HBuilder 会自动打包整个项目到模版里，（我感觉类似于运行到微信小程序，自动打包到 unpackage 里一样。所以放入新的模版，一定要重新再打包一下！模拟器运行的是，打包后的代码）

启动鸿蒙失败，请手动启动鸿蒙。不要慌，打开我们的鸿蒙模拟器，点击运行（打包后，就成功啦）

重点在这里，大部分人都能遇到的问题，建议好好看看！！（本人踩坑无数次）

运行中的问题：

1. 如果在 HBuilder X 中运行到鸿蒙模拟器过程中会报错，一般都是语法问题。

检查代码语法，vue3只支持ES6 模块规范，不支持commonJS！！具体参考官网

uni-app官网 (dcloud.net.cn)

2.  鸿蒙模拟器打包后报错，报错具体路径如果是这个"entry\build\default\cache\default\default@CompileArkTS\esmodule"，那就删掉项目中的整个模版，重新执行上述 3.3 - 3.7。

（期间不不不要运行到内置浏览器！！！，如果运行到内置浏览器了，还会报错，我也不清楚什么原因，我猜想是编译的时候，是不是自动改了模版里的文件，导致的报错）

3.  运行后打开的页面是空白问题，首先尝试重新编译uniapp项目，并重启模拟器或真机，如果依然白屏或闪退，那可能是你项目中有用到了鸿蒙不支持的组件或者api，可以尝试pages.json进行代码二分法排查（删除一半页面如果正常了代表被删除的那一半页面中有造成白屏或闪退的页面）。

官网这么说的，我用了，有效！！在pages.json中删除多余页面，我只留了一个入口页面，一步步排查

如果部分空白，检查你的页面中是否有以下错误

v-for v-if 不要在一个标签中同时使用！

页面中不要用 plus.***，不支持！！

uni.$ 等全局变量，也可能有问题，注释掉或删除试试！

还有一些 uniapp 特有的api，例如 uni.createSelectorQuery()， uni.createInnerAudioContext() , uni.getRecorderManager() 等等....鸿蒙不支持，建议好好检查一下 !

具体语法，参考官网，官网说的很清楚  uni-app官网 (dcloud.net.cn)

分享一个查错小 tips，如果一部分页面空白，可以先把空白的页面，方法删掉再次运行，其次是引入的文件，组件之类的，再是页面，这样方便定位错误位置。

我用的版本HBuilderX 4.24，新版本好像又有新变化，服了(吐槽)...具体看官网运行和发行 | uni-app官网 (dcloud.net.cn)

如果还有问题，欢迎评论区q我！