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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-07-27

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-cli4.0快速搭建一个项目的方法步骤

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

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

vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

Vue CLI3 如何支持less的方法示例

本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

Vue自动构建发布脚本的方法示例

简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

vue.js项目打包上线的图文教程

最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里

浅谈Vue 自动化部署打包上线

应用场景 项目打包后发布到正式环境,需要后端配合或者前端自己上传到服务器上,操作不便且容易产生问题,比如后台不在的情况而前台没有服务器的信息,这时发布就被延:或者前端自己上传容易导致误操作,如果上传错地方没正确上传都可能导致线上直接崩掉,而这对于已发布的产品而言是致命的.因此,有必要实现自动化部署代码到线上,解放双手的同时也减轻后端兄弟的压力. 项目使用 1.在项目根目录下, 创建 deploy/products.js 文件 /* *读取env环境变量 */ const SERVER_ID =

vue.js iview打包上线后字体图标不显示解决办法

在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader

shell脚本学习之调用脚本将文件打包zip的方法示例

前言 本文主要给大家介绍的是关于调用脚本将文件打包zip的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 最近刚刚接触shell脚本,写了一点简单的练手.这里是用python调用脚本执行打包操作. 方法如下: 第一步,创建脚本: #!/bin/sh CERT_DIR_ZIP=/data/cert/keys zip_user(){ zip -P $zip_psw /data/frontend/tmp/$zip_name.zip $client/* } if [ "x$1"

vue计算属性computed的使用方法示例

本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

使用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"