vite的vue3项目转apk，解决白屏，解决样式失效，vue项目变成app

说明1：根据我看过的文章，vue脚手架创建的项目和vite创建的项目打包成apk的操作是不一样的。

说明2：本文先说正确的操作，在后面再说你可能做的错误操作。

说明3：本文只讲操作，不讲原理，本文面向小白而做。

正确的操作

1、在vite.config.js加配置

2、在HBuilderX创建5+app项目

3、除了这两个，其他删掉

4、在命令行，用npm run build打包vue项目

5、打包后可以看到dist文件夹，把里面的文件全部复制到5+app项目里

6、单击manifest.json文件，修改配置

7、第一次搞这个的话，appID应该是没有的，你可以点击一下“重新获取”按钮，然后注册一下。。。。。我忘了，但应该很简单。

8、点击1，选一张图片作为桌面图标，然后点击一次2。也可以跳过这步，没关系的。

9、如果你是新手，这个不要打钩

10、如果你是新手，这行删掉

11、如果你是新手，这个全打钩

12、这里开始打包，第一次打包会自动下载一些插件，下载后根据这张图片在操作一次。关注命令行，可以看打包的情况。

13、打包，根据我这里设置，然后打包就可以了

都看到这里了，还不快点点赞！！！

可能错误的操作

1、情况一，我们回到第一步

我看其他文章，说要用代码1和代码4，而不用代码2和代码3，然后都成功了，完全没问题，但我发现他们用的都是vue脚手架创建的项目，我明确的说，vite创建的项目不能用代码1，要用代码2，而代码3和4,3肯定可以用，4我不知道，我没试过。

代码1、2的作用是解决白屏问题，如果vite创建的项目用代码1，会出现样式失效。

听说：vue脚手架创建的项目用代码3会出现导航失效

2、注意修改请求ip哦

如果把apk安装到手机，记得改成服务器（后端运行电脑）的真实ip