vue3项目打包成apk(android)详细图文教程

本文仅演示的是打包成android 版本的apk

一、打包vue3项目

1、打包

通过打包命令将vue3项目打包成一个dist文件夹

注意：一般的打包命令为npm run build,特殊设置的修改一下打包命令 

2、解决打包后的文件的白屏问题。

有时打包后的文件运行出现白屏问题，可能是绝对路径导致的，在vite.config.js文件中配置base:'./'

 图一  解决白屏问题

二、打包成apk

1、创建“5+App”项目

     在hbuilderx 中新建项目,选择“5+App”,然后填写项目名称,点击底部的"创建"按钮,步骤如下图：

图二  创建 5+app项目

2、打包文件移动

  将打包的dist中的文件全部复制到新建图一的根目录中

3、生成apk文件

点击顶部 "发行"，选择 "原生App-云打包"，具体内容如下，之后静静等待打包成apk

 图三  打包apk 步骤

三、生成apk

生成apk文件，然后将apk文件安装到手机上进行运行，测试一下运行结果

附：vue项目打包时报错，该如何解决？

要解决这个问题，您需要了解出现了哪些具体错误。以下是一些常见的 Vue 打包错误和如何解决的建议：

1. Module not found 错误：这通常表示您的代码中引用了不存在的模块。检查您的依赖项和代码，确保您引用了正确的模块。此外，如果您使用相对路径引用模块，尝试使用绝对路径引用它们。

2. Unexpected token 错误：这通常表示您的代码中有语法错误。检查代码以寻找未关闭的括号、分号等错误。您还可以使用 Lint 工具检查代码以及编辑器插件来帮助避免语法错误。

3. Cannot read property 'someProperty' of undefined 错误：这通常表示您的代码尝试访问未定义的属性。确保您正在访问正确的属性，并确保该属性已定义并可用。

4. Maximum call stack size exceeded 错误：这通常表示您的代码中存在循环引用或无限递归。确保您的代码不会无限递归调用相同的函数或对象。

5. Failed to load resource: the server responded with a status of 404 (Not Found) 错误：这通常表示您尝试加载不存在的文件或资源。确保您正确地引用了文件或资源，并确保您的服务器正在正确地提供它们。

6. SyntaxError: Unexpected token < in JSON at position 0 错误：这通常表示您尝试解析不正确的 JSON 数据。检查您的 JSON 数据以查找语法错误，并确保您使用 JSON.parse() 将其正确解析。

总结

到此这篇关于vue3项目打包成apk(android)的文章就介绍到这了,更多相关vue3打包成apk内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！