vue-cli或vue项目利用HBuilder打包成移动端app操作

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

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

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

1、 打开我们config中的js文件，修改assetsPublicPath的路径为"./"（下图的右下角位置）

2、 检查下assetsRoot: path.resolve(__dirname, ‘…/dist'),

assetsSubDirectory: ‘static',

assetsPublicPath: ‘./', (一般情况下是这样的)

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

1、打包后会生成dist文件

四、创建新目录（MyApp）

1、 在HBuilder中点击文件，打开目录，找到我们项目中的打包好的文件下找到dist文件，再命名，然后确 定。然后我们会看到这样的带着 W 的文件

五、转换APP

1、点击该项目右键属性，点击转换成App(T)

六、关于manifest.json配置

1、应用信息

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

app图标：现在下面点击图标配置，然后选择图片放上去（图片只能为PNG格式,通过手动改后缀是不可以的）

3、启动图片（splash）配置,sdk配置等有需要就配置没有就默认

七、调试和打包生成apk

1、先安装个第三方工具（360助手之类的，方便连接模拟调试）

2、调试

（运行–真机运行–选择第一个HBuilder基座运行-把HBuilder调查WebView模式，调试时点击右边）在这里插入图片描述

3、调试完后，进行发行

（1）点击发行，发行为原生安装包

（2）点击使用DCloud公用证书，点击打包

（3）等待制作，下载

4、安装

（1）可直接通过360助手来安装，或者用qq或其他发送到手机上安装，如不能直接安装，就到手机上文件管理找到文件点击安装即可

补充知识：vue-cli打包成apk的完整方法和打包成app所遇到的问题

vue-cli适合写spa(单页面应用程序)，因此，我们常会用它来开发app,当我们在pc端开发完成之后，肯定需要打包成apk或者ios（ios我在这里先不阐述）。

我的方法是利用hbuilder来构建apk文件。我们将vue项目创建好后，cd项目文件夹，输入npm run dev(3.0以下版本的命令)/npm run serve(3.0以上命令)，打开浏览器，在8080(默认)下查看是否正常显示。

然后用npm run build命令将vue项目进行打包，打包完成后，在项目文件夹中多了一个dist文件夹，这时我们用hbuilder打开vue项目，

右键将之转换成移动app，如果这时候直接将之打包成apk，则会遇到一个巨大的问题，那就是apk安装之后，内容都是空白，没有一点东西，原因就是：路径问题，路径问题，路径问题（重要的事情说三篇），打包好后，所有的路径都是/开头的，/开头表示从根目录开始，而我们需要做的就是将dist项目中的所有/都改为./，./的意思就是当前目录。

然后点击在项目栏中的发行——>云打包，打原生安装包——>最后点击打包完成（如果遇到要配置参数，按需求配置即可）.

下图就是我将打包好的apk安装到手机之后的图片。

以上这篇vue-cli或vue项目利用HBuilder打包成移动端app操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-cli4.0快速搭建一个项目的方法步骤

    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然当时vue-cli也出来了一段时间,但是不敢轻易尝试啊!) 所以使用的环境还是 vue2.x 版本的,而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!) 所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁移 现在终于到了空闲期,可以尝试着慢慢迁移了 本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建

  • vue-cli 如何打包上线的方法示例

    以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径 之后只需要放在服务器上运行就好了. *常用技巧 1.如果在config -> index.js 中的 buil

  • vue脚手架vue-cli的学习使用教程

    vue-cli的模板 vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.

  • 初试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-cli或vue项目利用HBuilder打包成移动端app操作

    一.测试项目是否可以正确运行 指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 利用HBuilder打包前端开发webapp为apk的方法

    利用HBuilder打包前端开发webapp为apk的方法

    现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功

  • python3.6利用pyinstall打包py为exe的操作实例

    一.电脑需安装32位的python3.6(注意是32位的python而不是操作系统是32位,安装64的python会发现pyinstall无法提供服务) 二.安装python之后安装py利用的模块,我的程序时利用了openpyxl模块,直接cmd模式到python路径下C:\Python36\Scripts,C:\Python36\Scripts>pip install openpyxl 三.安装pyinstall,C:\Python36\Scripts>pip install pyinsta

  • Vue cli及Vue router实例详解

    Vue cli及Vue router实例详解

    目录 前言: 1. 安装 1.1 npm安装 1.2 vue-cli安装 2. 初始化项目 2.1vue init命令讲解 2.2 项目初始化 3. 运行项目 4. 成功页面 5. 项目结构 5.1 总体框架 5.2 配置目录文件详解 5.3src项目核心文件讲解 6. VUE-ROUTER 6.1 快速入门 6.2 页面跳转 6.3子路由-路由嵌套 6.4路由传递参数 6.5命名路由-命名视图-重定向-别名 前言: 官方文档 vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了

  • Vue cli构建及项目打包以及出现的问题解决

    1. 首先安装node,推荐偶数版本;好了之后检查一下: node -v;出现版本好即为安装成功;win10家庭版本的msi版本的时候出现无法打开,更别说安装,可以自行百度; 2.nmp install vue-cli -g; ----->>vue -V;出现版本号就是安装成功了; 3.cd 到指定目录; vue init webpack 项目名称; 一些提示信息一一不说了;安装成功之后会有提示:一般按照他的提示步骤就可以了,cd 项目文件夹, npm install(这个是安装 packjs

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

随机推荐