精华内容
下载资源
问答
  • 因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法, 1. 是用apiClound来制作apk,官网入口 2. HBuilder 打包成apk 资料1 3. 用 vue+cordova打包 Android的apk 这里说一下第三...

    前言:

            因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法,

    1. 是用apiClound来制作apk官网入口  

    2. HBuilder 打包成apk  资料1  

    3. 用 vue+cordova打包 Androidapk

    这里说一下第三种方法:

    步骤一:cordova

    1. 全局安装环境   

          npm install -g cordova

    2.  创建 cordova 项目(直接使用就好了)

           (1)创建项目:cordova create cordova-app com.ysh mapp

           *注释:(1)名称是mapp,

                       (2)包名是com.ysh,

                       (3)项目名是cordova-app

           (2)安装依赖:cordova platform add android

    3.将上面的vue项目中的dist目录下的文件全部拷贝到cordova项目的www目录下

    注意:除了vue项目,,在此送大家2020 最新企业级Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处  免费获取,小白勿入哦,

    步骤二:要运行打包成安卓的apk,需要配置安卓的环境

    注意:没有apk,直接运行打包命令会报错:Failed to find 'ANDROID_HOME' environment variable. Try setting it manually...

    1.配置 jdk (安卓的sdk环境变量配置必须配置这个)

    链接:https://pan.baidu.com/s/15Ktkn66dk3WfIOHOgBBrQA        提取码:i0v3

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加   JAVA_HOME   +你  jdk  的路径

    (2)path  里面添加     %JAVA_HOME%\bin

    (3)接下来验证配置是否成功  java -version

     

    2.安装sdk  官网入口

    百度网盘地址:

    链接:https://pan.baidu.com/s/1qvF4S0EPVrvvGW5Ow1aCGA        提取码:h6ty 

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加 ANDROID_HOME   +你  sdk  的路径

    (2)path  里面添加     %ANDROID_HOME%\platform-tools

    (3)Android SDK配置完成,接下来验证配置是否成功

             ***先重启cmd!!!!!!!!!!

              打开c盘,打开cmd小黑框,输入adb

     

     

    3.安装 gradle 教程入口

     

    步骤三:这里默认我们必需的三个环境变量已经配置好了

    1.在cordova-app中配置安卓插件

    如果之前有,不想要了,先删除android平台:

    cordova platform remove android

    如果之前没有,就直接安装:

    cordova platform add android

    2.用编译器或者直接打开我们的cordova-app项目文件夹

    3.输入打包命令(第一次特别慢,2-8分钟哦)  

    cordova build android --release

    4.打开我们在打包以后出现的apk的路径(注意,这里生成apk成功了,但是没有签名,模拟器还有手机是不运行他安装的,会提示安装失败)

    5.apk签名生成(注意,生成在你apk所在的文件夹底下,我这里做示例是用d盘根目录)

    keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

    *注释:-keystore D:/mytest.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户当前目录下;
          -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey;
          -keyalg RSA 表示采用的RSA算法;
          -validity 20000表示证书的有效期是20000天。*

    注意:密码库口令,新口令虽然不显示,但是是存在的,这个要记住,给apk文件配置属于他的签名的时候需要

    6.解决生成签名时密钥库格式转移的报错问题

    输入:也就是提示的这一句

     keytool -importkeystore -srckeystore D:\mytest.keystore -destkeystore D:\mytest.keystore -deststoretype pkcs12

    然后输入口令,就生成成功了,看下面这个

    打开我的d盘根目录地下出现了这个,带old是我们之前密码规则有问题的,所以用

    mytest.keystore  这个文件

    7.将我们的签名与apk绑定起来

    打开以后,最终拥有的文件,应该和我这个是差不多的

    在此目录下打开cmd小黑框   输入:

    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest

    这里的密码短语就是你上面的密钥库口令(mytest.keystore必须和apk在同一目录地下)

      

    8.将你的apk改名放到模拟器,或者直接放手机上点击安装,进行测试

    我这里是雷电模拟器,有需要可以百度下载,

    注意:最后送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处 免费获取,小白勿进哦

     

    展开全文
  • 这几天我做了一个vue移动端的小项目就想着打包成app安装在手机上看看我就讲解下整个思路和过程首先项目开发完之后 (我使用的是vue-cli 3.*版本)在项目文件夹下创建一个vue.config.jsmodule.exports={publicPath:"./...

    这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看

    我就讲解下整个思路和过程

    首先项目开发完之后  (我使用的是vue-cli 3.*版本)

    在项目文件夹下创建一个 vue.config.js

    module.exports = {

    publicPath: "./",    //   打包 配置这个可以先本地查看下 效果

    productionSourceMap: false     //  调试文件的功能关闭 能加快打包

    };

    运行命令行   npm run build

    项目文件夹下生成一个 dist文件夹 下面有这些文件  然后打开index.html 本地预览可以

    然后打开huilderX  创建一个 5+App项目

    创建完成之后 打开文件目录

    把你vue项目打包的文件 把这里的 相同的文件 覆盖掉

    主要是  css  img  js 文件夹   和index.html文件

    完成之后

    进入项目 打开manifest.json  文件  进行基础的配置 包括版本  名称 图标  sdk等配置

    进入hBuilderX   右击项目->发行->原生app云打包

    如有有自己的开发id就用自己的 没有就用dcloud的公有证书

    点击打包   等到打包完成  他会返回一个app的下载地址  你下载下来

    是一个apk文件  然后传到手机上就可以 点击安装了

    安装完之后 测试 可以 表示打包成功了

    本人也是前端 小白 期待大佬的指点 自己一个人摸搜也是走了不少弯路

    展开全文
  • // Paths assetsRoot: path.resolve(__dirname, "../dist"), assetsSubDirectory: "static", assetsPublicPath: "./", //修改打包后路径 /根路径配置 ./非根路径配置 /app/打包到指定目录 打包成apk用./ .........

    默认配置,

    直接npm run build

    将生成后的dist文件夹复制出来放到HBuilder相应目录下,然后HBuild下打开dist目录。

    强调:用的是HBuilder 不是 HBuildrX,因为我用HBuilderX打包反复闪退,实在搞不定原因啊

    要么转换为移动app,

    要么新建一个移动app然后复制manifest.json文件到disk目录。

    然后右键菜单 发行=》云打包-原生安装包=》接下来直接下一步下一步就OK了。

    其中android证书可以在这个网站注册个,测试够用了

    http://www.appcan.cn/

    踩坑:

    1、默认图片都放到了assets/img/下,但是图片超过100kb打包后跑到了static/img下,然后图就裂了

    解决方法:直接进static/img/  或 修改配置 limit 我给改成了1000000

    {

    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

    loader: "url-loader",

    options: {

    limit: 10000000,

    name: utils.assetsPath("img/[name].[hash:7].[ext]")

    }

    },

    2、链接跳转失效了

    解决方法:原因是因为 mode:history模式,把这个取消了就可以了。

    const router = new Router({

    // mode: "history",

    // base: getAbsolutePath(),

    // base: "/app/",

    routes: [

    {

    // 首先进行重定向操作

    path: "/",

    redirect: "home"

    },

    ......

    ]

    3、路径也要修改下

    build: {

    // Template for index.html

    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths

    assetsRoot: path.resolve(__dirname, "../dist"),

    assetsSubDirectory: "static",

    assetsPublicPath: "./", //修改打包后路径 /根路径配置 ./非根路径配置 /app/打包到指定目录 打包成apk用./

    ......

    }

    展开全文
  • 一、测试项目是否可以正确运行 指令:npm run dev1、首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目二、修改路径 (assetsPublicPath: ‘./')1、 打开我们config中的js文件,修改...

    一、测试项目是否可以正确运行 指令: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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持随便开发网。

    展开全文
  • 第一步,vue项目开发完成后编译需要更改的配置项:网上有人说 productionGzip 可以设置为true,但本人测试发现 productionGzip 为true的话会导致最后一步 打包失败;其实设置为 false的话,通过npm run build 编译...
  • Vue 移动端打包成apk

    2021-04-12 21:53:30
    Vue 移动端打包成apk如何将Vue 移动端打包成apk打包配置打包使用HuilderX进行打包打包 云配置 如何将Vue 移动端打包成apk 打包配置 dex.js的build下的assetsPublicPath修改为如图(解决打包空白) 将webpack.prod....
  • 大家所熟悉的 Vue API Vue.nextTick 全局方法和 vm.$nextTick 实例方法的内部都是调用 nextTick 函数,该函数的作用可以理解为异步执行传入的函数。一、Vue.nextTick 内部逻辑在执行 initGlobalAPI...
  • Vue-Vant—打包apk

    2021-01-18 16:34:01
    Vue项目打包Apk有两种最常用的方法,其一使用Dcloud-HbuilderX打包Apk,其二使用Cordova打包Apk。 注意,本文只介绍HbuilderX打包,Cordova忽略。 二、详解 第一步:下载HbuildX 如下图所示,下载HbuilderX,...
  • hbuilder 打包 VUE项目为APK 本项目使用 hbuilder 进行打包 已经验证 设置 vue 打包路径 VUE默认的项目根路径会导致打包后白屏。 vue.config.js publicPath: './', 解决手机点击返回按钮退出项目bug /...
  • 首先打包vue,这个就不多说了,学vue的应该都会1、下载项目 https://github.com/electron/electron-quick-start下载以后解压2、将自己项目vue打包后的dist拷贝到项目 electron-quick-start 中的dist3、修改路径// ...
  • vue-cli中如何引入bootstrapfirst step:下载jqcd 到项目目录下,运行npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。图 1second step:修改build目录下的webpack.base.conf.js...
  • Cordova+Vue打包Android Apk

    2020-03-23 15:05:33
    文章目录Cordova打包Vue移动端项目Android环境要求安装Cordova安装Android SDK安装GradleCordova创建项目Vue项目使用Cordova打包创建一个的Vue项目github源码 Cordova打包Vue移动端项目Android 环境要求 Cordova ...
  • 使用cordova打包Vue生成apk包准备工作配置打包项目cordova 准备工作 npm 版本最好是最新的,升级npm,node版本也有一定的要求的,自行检查自己的版本。 npm i -g npm 创建好自己的vue项目。 配置 主要的两个配置:...
  • Vue.js2.0教程.apk

    2018-10-13 00:20:03
    Vue.js 是用于构建交互式的 Web 界面的库。 Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。这是vue教程,打包成app方便阅读。
  • vue生成带签名的apk

    2018-03-30 10:26:00
    昨天说到生成签名证书,今天就是最后一步了,生成带签名的apk。啦啦啦~~ 生成带签名的apk有两种方式,一种是先生成debug版本,再加上数字签名证书然后生成带签名的APK。另外一种是直接一条命令生成代签名的APK。...
  • 蘑菇街作为中国最大女性购物社区,其APP的设计水平也毋庸置疑的 (1)准备工作 在阅读大神的博客时有人问里面使用的美工素材怎么得到的,其实很简单,下载一个APP,把APK格式修改成rar后解压,你会在目录下看到所有...
  • Vue使用cordova打包成apk

    2019-11-06 11:24:10
    1.新建一个文件夹 2.创建cordova项目 cordova create DonateBlood cn.brynn.donateBlood Donate(Donate是看到的app名字,DonateBlood是文件夹名字,... cordova platform add android ...3.创建vue项目 在Donate...
  • 原标题:基于Vue的项目打包为移动端app现在基于vue全家桶技术体系,基本上可以开发各端的各种应用,pc端的应用,开发完成以后,直接运行打包命令 yarn build 即可打包,部署到服务器端上线即可。那么,今天我们来聊...
  • 1.打包路径 / 表示绝对路径(后台... } 哈希模式(本地)-使用web-app 本地打开可以打包成apk Native App: 本地应用程序(原生App) Web App:网页应用程序(移动web) Hybrid App:混合应用程序(混合App) 混合开发:...
  • 事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目1,将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './'2,执行npm run ...
  • 第一步,vue项目开发完成后编译需要更改的配置项: 网上有人说 productionGzip 可以设置为true,但本人测试发现 productionGzip 为true的话会导致最后一步 打包失败; 其实设置为 false的话,通过npm run build ...
  • vue项目通过Hbuild 打包成apk文件 一,修改基本配置 vue.config.js文件,注释代理配置 publicPath 改成 ‘./’ //vue.config.js module.exports = { publicPath: "./", //outputDir: "dist", // 输出文件目录 ...
  • 如何使用vue+cordova进行移动端的apk自动化打包 第一步:下载node.js 尽量下载新的版本 如果版本太低的话用不了npm 检查安装上没有 node -v 第二步:全局下载cordova cordova install -g 同上 cordova -v 检查...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 345
精华内容 138
关键字:

apkvue

vue 订阅