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

来自:网络
时间:2024-06-10
阅读:

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

一、打包vue3项目

1、打包

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

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

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

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

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

 图一  解决白屏问题

二、打包成apk

1、创建“5+App”项目

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

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

图二  创建 5+app项目

2、打包文件移动

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

3、生成apk文件

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

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

 图三  打包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() 将其正确解析。

总结

返回顶部
顶部