如何使用HBuilderX把vue项目打包成apk
目录
- 1. 下载HBuilderX
- 2. 安装HBuilderX
- 3. 在vscode中打包vue项目
- 3.1 在打包vue项目之前
- 3.2 执行打包命令
- 4. 在HBuilderX中打包apk
- 4.1 在HBuilderX中新建一个项目
- 4.2 把之前打包的dist下的内容拷贝到此工程下面
- 4.3 删除不要的目录
- 4.4 点击:manifest.json,进行以下配置
1. 下载HBuilderX
官网下载地址:https://www.dcloud.io/hbuilderx.html
2. 安装HBuilderX
官网安装说明:https://hx.dcloud.net.cn/Tutorial/install/windows
3. 在vscode中打包vue项目
3.1 在打包vue项目之前
需要修改以下几处配置:
(1)config\index.js
把build下面的assetsPublicPath的值,从’/‘改为’./’:
(2)src/router/index.js
mode如果是history,注释掉。
根目录直接指向想要的画面。
(3)build\utils.js
找到图中的if代码,添加以下语句(以防css里找不到资源文件):
publicPath: '../../'
3.2 执行打包命令
node build/build.js
在根目录下面会生成dist目录。
4. 在HBuilderX中打包apk
4.1 在HBuilderX中新建一个项目
4.2 把之前打包的dist下的内容拷贝到此工程下面
4.3 删除不要的目录
4.4 点击:manifest.json,进行以下配置
(1)应用标识
此处需要注册HBuilder账号,来获取AppID。
(2)图标配置
选择一个1024*1024的图标,然后勾选:【自动生成所有图标并替换】
(3)在【源码视图】的plus属性中,增加以下代码:
"statusbar" : { //应用可视区域到系统状态栏下透明显示效果 "immersed" : true },
项目上点右键→【发行】→【原生App-云打包】
选择【使用公共测试证书】。去掉广告的勾。按下【打包】
【继续打包】
根据提示查看打完的包,就OK了。
注意:每天免费打包的次数是有限的,且用且珍惜。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
利用HBuilder打包前端开发webapp为apk的方法
现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功
-
初试vue-cli使用HBuilderx打包app的坑
微信授权登录提示code-2 appid和appsecret应该是移动应用,而非网页应用 微信授权登录提示code:-100/自定义基座无法微信登录和分享 开发者账号配置的应用签名应该是md5加密后的值,而不是原字符串 生产环境proxyTable不生效,导致接口500 两种解决办法: ①入口文件使用网络地址,且和接口在同一域名下 ②(推荐) 入口文件依旧是index.html 在config/prod.env和config/dev.env下添加API_ROOT 'use strict' mod
-
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.
-
如何使用HBuilderX把vue项目打包成apk
目录 1. 下载HBuilderX 2. 安装HBuilderX 3. 在vscode中打包vue项目 3.1 在打包vue项目之前 3.2 执行打包命令 4. 在HBuilderX中打包apk 4.1 在HBuilderX中新建一个项目 4.2 把之前打包的dist下的内容拷贝到此工程下面 4.3 删除不要的目录 4.4 点击:manifest.json,进行以下配置 1. 下载HBuilderX 官网下载地址:https://www.dcloud.io/hbuilderx.html 2. 安
-
解决cordova+vue 项目打包成APK应用遇到的问题
公司前端界面用的是vue,我要嵌入到Android中生成App 第一步:安装node node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安装是否成功. npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装. 第二步:安装cordova 1. 打开cmd 输入命令:npm instal
-
vue项目打包成桌面快捷方式(electron)的方法
网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n
-
vue前端项目打包成Docker镜像并运行的实现
目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #
-
使用electron将vue-cli项目打包成exe的方法
如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron
-
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash
-
vue项目打包后上传至GitHub并实现github-pages的预览
vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即
-
vue项目打包上传github并制作预览链接(pages)
当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.
-
Vue项目打包压缩的实现(让页面更快响应)
影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,
-
Vue项目打包、合并及压缩优化网页响应速度
目录 前言 一.请求内容太大 解决方案: CDN引入 压缩请求资源 一.http请求次数太多 解决方案: 总结 前言 影响网页响应速度的因素有很多,例如:请求内容太大.http请求次数太多.服务器本身处理请求太久.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长.服务器请求处理太久和js脚本执行耗时过长,这两个跟代码的质量和服务器配置关系太重,需要根据具
随机推荐
- Docker搭建本地私有仓库的详细步骤
- Lua中操作字符串的基本方法整理
- iOS仿微信图片分享界面实现代码
- 深入理解Java中的接口
- php写的简易聊天室代码
- python使用pymysql实现操作mysql
- C#中foreach实现原理详解
- 浅谈MySQL中group_concat()函数的排序方法
- JavaScript简单实现鼠标拖动选择功能
- 基础的Linux Shell技巧小结
- 在IIS8服务器添加WCF服务支持的方法
- 中国站长对Google Adsense规则的曲解
- 约瑟夫环问题(数组法)c语言实现
- C#实现屏幕拷贝的方法
- php使用 readfile() 函数设置文件大小大小的方法
- Android自定义垂直拖动seekbar进度条
- 物联网常用协议的整理
- Linux Socket 编程简介和实现
- python实现跨excel的工作表sheet之间的复制方法
- ES6 更易于继承的类语法的使用