Hbuilder将vue项目打包为app(具体步骤和注意点)

  • 打包配置
  • 进行打包
  • 注意事项

打包配置

1.打开Hbuider,点击左上角文件,点击新建,然后点击项目。项目类型要选择5+App,项目名称和地址自己设置。

2.创建完成后,可以看到css、img、js、upackage文件夹和index.html、manifest.json

css、img、js、index.html这些可以删除替换成我们写的代码 。(记住html文件最好也是写index)

在终端执行打包 npm run build ,获得发布包 dist 文件夹,其中包含所需的这些文件。

3.点击manifest.json,这里面可以看到基础配置、图像配置、七大界面配置、模块配置、权限配置、App常用其他设置、源码视图。

3.1 基础配置这一块直接看着配置名称填即可

3.2 图标配置,可以用一张图片生成不同平台对应的图标,也可以选择不同的图片。

设置的图片必须是png格式;如果没有,可以用工具修改一下图片格式。

3.3 启动界面配置,根据需求配置即可

3.4 模块配置,根据项目所需模块进行配置

3.5 权限配置,如WiFi、电话、摄像头等

3.6 app常用其他设置,这里面有个支持cpu类型,我们把它所有都勾选上;如果不勾选,有些手机可能安装不了。

进行打包

点击发行、原生app云打包。

没有证书的可以选择老版证书,记得把基础广告去除

最后点击打包即可,如果打包人数多,需要稍等几分钟,打包完会提供Apk下载链接。打包成功后会生成一个在线的下载的地址,但是只能下载5次

注意事项

如果发现打包完的app打开,出现空白,显示不完整等问题,可参考以下几点。

1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址
myDouyu/api/RoomApi/game => http://open.douyucdn.cn/api/RoomApi/game
(如果有在线字体图标, 图标引入地址@font-face中的url前加http)

2, 在vue.config.js中,修改公共路径 publicPath : ‘./’

3, vue2:在路由文件/src/router/index.js 中把路由历史模式注释掉 // mode: ‘history’ 或改成默认的 hash 模式
vue3:在路由文件/src/router/index.js 中把路由历史模式改成哈希模式 history:createWebHashHistory(“/#”)

Hbuilder将vue项目打包为app(具体步骤和注意点)相关推荐

  1. app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App

    在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...

  2. vue项目打包成app,在ios端iconfont 部分字体图标不显示

    最近在用vue结合capacitor 写app的项目,痛苦真痛苦. 在xcode上打包成app之后,发现有些字体图片怎么改都显示不出来. 解决办法: 把引用的css url 加上https

  3. 通过cordova将vue项目打包成app

    准备工作包括nodejs.cordova.AndroidStudio. 一.创建一个cordova工程 cordova create cordovaVue cd cordovaVue config.x ...

  4. html5打包成app不能拍照,vue项目打包成app无法使用input调用相机

    问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片 解决方案: 1.利用HTML5 Plus的Camera调用相机 2.利用HTML5 Plus的IO来实现读取 ...

  5. 【转】vue项目打包上传的步骤和方法

    vue项目实现github在线预览功能 Vue项目上传github并预览 vue项目上传Github预览

  6. 血淋淋的教训—将Vue项目打包成app的跨域问题

    1 devServer: { 2 host: '192.168.1.58', 3 port: 9999, 4 historyApiFallback: true, 5 noInfo: true, 6 o ...

  7. 将Vue项目打包成App

    首先将源码执行如下命令打包生成 dist 目录 npm run build 或 yarn build 然后打开 HbuilderX 创建 5+App 创建好之后,在你创建的项目下会生成 img,css ...

  8. 安卓开发 | 将Vue项目打包为app

    知识目录 一.写在前面✨ 二.Hbuilder X准备

  9. vue项目打包App

    本地的vue项目打包成App.这里以Hbuilder为例.首选命令行进入项目的目录执行 npm run build  打包成功之后再项目下回生成一个dlist 文件夹.在Hbuilder中导入dlis ...

最新文章

  1. POJ1067_取石子游戏_威佐夫博弈
  2. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
  3. python写管理系统-基于Python实现用户管理系统
  4. jax-ws cxf_Apache CXF – JAX-WS –简单教程
  5. linux命令基本格式教程,Linux命令基本格式(详解版)
  6. 大数据学情分析_多分学情大数据分析
  7. Spring2..5整合Ehacahe
  8. ecshop网站后台功能之系统管理
  9. pandas手册_Github标星6000+ 这可能是最全的机器学习工具手册
  10. docker安装chirpstack_用docker-compose快速部署ChirpStack
  11. php的process_field,使用Boost :: Process运行php命令
  12. java传文件到kafka_Java将CSV的数据发送到kafka的示例
  13. 微服务下蓝绿发布、滚动发布、灰度发布等方案,必须懂!
  14. centos7.5 gnome3的主题优化
  15. BLUES吉他学习笔记004 bluesrv[8]
  16. linux mysql dengl_mysql中类似oracle的over分组实现
  17. pcf8563c语言程序,IIC的PCF8563实用时钟程序(iccavr)
  18. 迎风破局!Cocos 引擎荣获第六届金陀螺奖「年度优秀游戏服务商奖」
  19. colorkey口红怎么样_colorkey镜面唇釉怎么样
  20. android 多线程创建texture,从源码角度剖析Android系统EGL及GL线程

热门文章

  1. 解决You are using pip version 9.0.1, however version 18.0 is available. You should consider upgrading
  2. 淘宝API官方商品、交易、订单、物流接口列表
  3. 【UnityFPS射击游戏】(1)制作FPS角色控制器方法①
  4. Python-pip配置国内镜像源
  5. 30. secure world对smc请求的处理------OP-TEE对fast smc请求的处理
  6. 第七次 java实验 紫金学院 异常
  7. 同样是程序猿,为什么别人能进大公司而你不能?
  8. 使用python对批量对文件进行重命名(增加统一前缀)
  9. 固态硬盘和普通硬盘的区别是什么?
  10. Python依赖库、安装包(源码安装)