VUE项目用hbuilder 打包为手机APP

一、测试项目是否可以正确运行    指令:npm run dev

首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目

不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行

二、修改路径(assetsPublicPath: ‘./‘)

打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置)

三、打包文件  指令:npm run build

打包后会生成dist文件

四、把dist文件变成app模式

在HBuilder中点击文件,打开目录,找到我们项目中的dist文件,确定。

然后我们会看到这样的带着 W 的文件

五、转换APP

右键dist,点击转换成App(T)

六、在manifest.json里面配置APP名字及APP图标

我们在上一步会生成一个manifest.json文件,打开它,我们在这里操作

app名字:就是应用名称(这里我写的是思源000)

app图标:现在下面点击图标配置,然后选择图片放上去(图片只能为PNG格式,通过手动改后缀是不可以的),在这里我选择的是圣诞小人的图标

七、生成apk

1.点击发行,发行为原生安装包

2.点击使用DCloud公用证书,点击打包

好了打包成apk文件了,把这个安装到手机上咱们就可以用了,嘿嘿!!!

原文地址:https://www.cnblogs.com/wordblog/p/10205637.html

时间: 12-30

VUE项目用hbuilder 打包为手机APP的相关文章

HBuilder打包App方法

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

通过cordova将vue项目打包为app

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 1.添加cordova项目 $  cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myApp: 包名 myApp2: 项目名(在config.xml的<name>中查看) 2.在vue中添加cordova的配置 myAp

堪比上万元的高级测试内容套餐(性能、自动化、手机APP、职业发展、管理)

以下为套餐的汇总与介绍(套餐就是多个单个课程的打包),方便大家查看. 如果要购买单个课程请点击这里:http://xqtesting.blog.51cto.com/4626073/1669386 套餐 介绍 购买地址 [热卖]移动手机APP测试视频课程套餐 分为三部视频初级篇.进阶篇.高级篇,层层递进,是我们快速学习的必备手册 http://edu.51cto.com/pack/view/id-343.html [NEW]Java项目性能测试实战和环境搭建合集 全新视频,无废话,接地气,重点内容

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标下面的文字)也是"MyApp" 如果要换成其他名字,修改 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成需要的名字. 注意如果xml内容有中文,要改成utf-8编码,注意是文

手机 app 开发的几种方式 ionic 学习思路以及 ionic 新建的项目分析

手机 app 开发的几种方式 ionic 学习思路以及ionic 新建的项目分析 学习要点:1. 目前开发手机 app 的几种方式2. Ionic 学习思路简介3. Ionic CSS 框架4. ionic js 指令 路由 其他 ui 交互效果5. ionic 命令行/CLI 安装 调试 打包( 第三季 第一讲已讲)6. ionic 开发包下载 以及命令创建的项目分析 1. 目前开发手机 app 的几种方式原生/Native: 使用原生 SDK 开发 App.优点不用说, 当你有足够的资源,这

vue-cli+webpack搭建简单的vue项目框架

0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version    若出现node版本号 则安装成功 2.通过命令:cd 文件夹名     进入某具体文件夹后进行如下命令操作: 3.npm install -g vue-cli         全局下安装vue-cli脚手架 4.vue init webpack project    初始化项目 此处会出现一些选项,进行图片上的操作即可 5.cd  project        进入所需project项目文件夹 5.npm

高效省心实惠的手机APP制作平台

当今的移动互联网+时代,几乎人们生活中所有的服务内容都可以通过手机APP来完成,手机APP制作已是成功项目在商场竞争中必不可少的因素. APICloud正是应海量手机APP的制作需求而诞生的.作为中国领先的"云端一体"移动应用云服务提供商,APICloud重新定义了移动应用开发,为开发者从"云"和"端"两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天,可以帮助开发者快速实现移动应用的开发.测试.发布.管理和运营的全

为 Vue 项目写单元测试方法详解

本文和大家分享的主要是为 Vue 项目写单元测试相关内容,一起来看看吧,希望对大家学习Vue.js 有所帮助. 众所周知,Vue.js 是一个非常牛逼的 JavaScript 框架,对于创建复杂功能的前端项目是非常有用的.不管是什么项目,检查应用是否正常工作,运行是否为预期,是尤为重要的.然而,为了保证业务正常运行,我们的项目,每做一次更新,都要对所有功能做一次回归测试,随着项目的增大,重复的测试工作越来越多,越来越乏味,手工测试将变成一个恶心的事情.正因如此,自动化测试诞生了,它可以随时监测我

手机APP开发流程

手 机 APP的开发流程越来越成熟了,因此,每年产生的APP也数以万计.就目前而言,在苹果的IOS平台与谷歌的安卓平台为主流,也有一些开发者仍坚守在 黑莓和微软的操作平台,之所以他们不会放弃黑莓10或Windows Phone 8平台开发,主要是因为苹果严格控制开发商,而Android平台免费 或者质量奇差的应用程序太多.那么手机App软件开发流程是具体怎样的呢? 为此,粗略分享一下App软件程序开发流程. 1)需求分析和产品分析 当收到客户的需求之后,不是马上动手去做功能分析.产品逻辑架构或者

vue项目总结,所用到的技术点

1.用到的技术点 vue 是一个渐进式JavaScript框架 npm install vue vue-route 是一个路由匹配功能 npm install vue-router vue-resource 发送ajax请求的 npm install vue-resource vue-preview 图片预览插件 npm i vue-preview -S vuex 组件传值 npm install vuex --save mint-ui 基于vue的移动端组件 npm i mint-ui -S