混合开发的一些小tips（uniapp+hbuilder x+vue3+vite+ 5+APP）

很多人现在使用uniapp直接进行APP或者小程序的开发，但是还有一部分人用到H5+的代码进行混合开发，今天来说说这里要遇到的坑

1.问：我正常使用vue3开发的一个H5项目，如何测试他调用原生功能的开发项呢，

答：首先新建一个5+APP的默认模板项目如图，

 然后，删除所有的默认文件，只留下manifest.json文件，把你打包好的vue项目，dist下的内容全部复制到这个项目下，并且去manifest.json模块配置下对相对应功能进行勾选，如图，红框部分是正常vue项目打包后dist下的内容

这里我用的是本地模拟器，所以此时配置模拟器的abd相关配置后，就可以看到效果了

 2.问：如果我想一边调试一边开发怎么办呢

答：你需要在本地启动一下你的vue项目，然后在manifest.json的应用入口处把默认的index.html改为地址，如图，这里要注意不要写localhost的地址，不然会识别不到

 3.问：我的项目在app端不支持type=module的script标签模式怎么办呢。

答：这里以vite项目为例，配置一个@vitejs/plugin-legacy插件配置到vite.config.js，实现客户端的兼容，对于不支持module的客户端，他会降级处理，代码示例：

legacy({
      // target 的目标可以根据你的需求调整，但默认值通常就够用
      targets: ['defaults', 'not IE 11']
    })

4.最后说明一下，如果模拟器没有太多反应，可以通过谷歌的chrome://inspect/#devices打开如图所示界面去查看问题

 

 

点击inspect，得到如下界面，可以查看控制台寻找原因