用Cordova将vue项目打包成app

最新推荐文章于 2024-07-18 08:47:15 发布
最新推荐文章于 2024-07-18 08:47:15 发布
阅读量7.3k 收藏 13
点赞数 6
分类专栏： vue 文章标签： cordova vue app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bing103425/article/details/81169784
版权
本文详细介绍了如何配置安卓环境，构建Vue项目，使用Cordova搭建打包环境，修改Vue项目，以及打包过程中的注意事项。在配置环境时强调了JDK必须为1.8版本，Android SDK的选择和环境变量的设置。Vue项目的修改涉及添加meta标签，引入cordova.js，修改配置文件。最后通过npm命令进行打包，生成apk并安装到手机上。
摘要由CSDN通过智能技术生成

1.配置安卓环境

（1）下载JDK和JRE，安装（通常JDK会集成JRE，所以只需安装JDK就好）JDK一定要是 8 版本（JDK1.8），Down了个10版本的差点配到吐也没成功，这是个惊天神坑

（2）下载Android  SDK，双击安装，复制下安装目录

（3）配饰环境变量：系统 => 高级系统设置 => 环境变量 =>系统变量 => 新建

新建一个ANDROID_HOME，值是sdk安装路径

新建一个JAVA_HOME，值是JDK安装路径

新建一个CLASSPATH，值是   .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;   （最前面有个点）

找到PATH，点击编辑，添加SDK目录下的platform_tools和tools路径，再添加一个JDK下的bin路径

 

最低0.47元/天 解锁文章
前端复制粘贴工程师
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目打包成app——Cordova
weixin_44760923的博客
09-15 775
Cordova是使用HTML、CSS和JavaScript构建的混合移动应用程序的平台。 官网：https://cordova.apache.org/ 中文官网：http://cordova.axuer.com/ 开发环境及工具 开发环境 操作系统： Windows 10 nodeJs：需要使用其npm包管理工具安装Cordova Java环境： 下载安装jdk http://www.oracle.com/technetwork/java/javase/downloads/index.h.
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目整合Cordova一键打包apk
最新发布
Enaium的博客
07-18 420
Cordova是一个依赖于Node.js的工具，它可以将HTML页面打包为apk等移动端应用，本篇文章将介绍如何使用Cordova将Vue项目打包为apk。
cordova 打包 vue项目
zhSpace的博客
11-30 2378
1、安装cordova npm install -g cordova 2、新建cordova项目 cordova create jtcsm com.xx.jtcsm eat jtcsm是项目名称 com.xx.jtcsm是包名 eat app标题 3、创建完新的cordova项目后将 vue编译完后dist文件夹下的文件复制到 www文件夹下 * 记得将原先www文件夹内的文件全部删除 4、检查环境是否准备就绪 cordova requirements 5、生成签名...
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 622
想要更好的阅读体验，可以转我的个人博客。 Cordova 安装 使用 npm 安装 cordova 命令行: npm install -g cordova 创建 Vue 项目: vue create cordova-test 找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。 vue add vue-cli-plugin-cordova-simple 新建 vue.config.js 文
使用 cordova 将vue项目打包为APP流程
weixin_43703162的博客
04-29 583
安装cordova流程 什么是 cordova cordova 是由 Apache 基金会支持的，使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统（Android、IOS、Windows phone）原生 API，它可以将你写的 Web 程序包裹进原生的 APP 壳中，也就是我们常说的 Hybrid APP （混合应用）。本文是一个前端开发者如何从...
vue项目打包成App
weixin_38673922的博客
07-24 2206
找到HBuilder X 工具栏 => 发行 => 原生App-云打包 选择公共测试证书。在router/index.js关闭路由的history模式（默认哈希）将生成的dist文件夹里面的内容复制，放进该文件夹（app1.0）中。新建 => 项目 => 选择 5+app => 输入项目名称。
通过cordova将vue项目打包为webapp的方法
01-19
下面开始对vue.js项目进行打包，打包环境为Android。 可以看下我的github：https://github.com/padipata ，里面有我自己写的vue项目，喜欢的给个关注呗。 1.添加cordova项目 $ cordova create myApp1 org.apache....
教你用Cordova打包Vue项目的方法
08-29
在近些年来，混合开发App变得越来越流行，许多开发者选择使用Vue框架来开发混合App，但是当开发完成后，很多人不知道如何将Vue项目打包成App。目前流行的打包方法有weex和Cordova两种，今天我们将详细介绍使用...
Cordova+Vue实现Android-APP开发
07-12
### Cordova+Vue 实现 Android...通过上述步骤，您可以成功地将Vue项目与Cordova相结合，开发出功能强大的Android应用程序。这种方式不仅能够充分利用Vue.js的灵活性，还能借助Cordova的强大功能实现真正的跨平台开发。
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后  （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports = {   publicPath: “./”,    //   打包 配置这个可以先本地查看下 效果   productionSourceMap: false     //  调试文件的功能关闭 能加快打包 }; 运行命令行   npm run build 项目文件夹下生成一个 dist文件夹 下面有这些文件  然后打开index.html 本地
Cordova 打包vue 项目
jie980432841的专栏
04-10 641
https://www.cnblogs.com/jeremy5810/p/8467258.html
如何用HBuilderX将Vue项目打包成APP到手机使用
这里是前端，是不一样的前端
09-16 2350
如果出现vue打包后出现空白请参考这篇博客：https://blog.csdn.net/weixin_48193717/article/details/108401616 一、把写好的vue项目进行打包生成dist 二、打开HBuilderX新建项目选择5+APP（A） 把dist的文件夹复制到HBuilderX创建的5+App中 配置图片 配置启动页面 SDK配置 模块权限配置 配置沉寂模式 沉浸式是APP界面图片延伸到状态栏， 应用本身沉浸于状态栏，所以如果第三方的软件没有为状态栏分
cordova打包vue项目
debugcool的博客
02-03 192
需要软件 Android SDK，我这里直接安装Android Studio的时候已经安装了。 cordova使用npm安装 npm install -g cordova jdk安装教程网上都有，就是记得配置环境变量JAVA_HOME 创建cordova项目 cordova create helloCordova 添加Android cordova platform add android --save 然后把你打包好的vue项目复制到helloCordova项目中的www目录下 然后就是build你
VUE+cordova打包apk
小唐的博客
11-30 1736
上面说过 自己的vue 项目 通过 npm run build 打包好的静态文件 static 和 index.html复制到 www 的文件夹下替换。可以通过官网安装 也可以通过 android studio 进行安装 配置好环境变量 可以查询资料。打包好以后 会出现一下图片 我们需要的是 静态资源（static） 以及 index.html。生成的证书要跟打包好的项目放在一个文件夹内。这时候文件夹下会出现你创建好的项目文件。您的名字与姓氏是什么：【自己写】这个时候可以打包自己的项目。
Vue项目打包App步骤
kangkang212916的博客
06-10 884
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
Vue项目打包移动端App(App打包教程)，简便直接
大雾起了清晨
07-12 780
Vue项目打包移动端App(App打包教程)，简便直接_vue打包app_唐 城的博客-CSDN博客
Cordova打包教程
L824627453的博客
08-23 1345
5、运行cordova build android进行打包5、运行cordova build android进行打包5、运行cordova build android进行打包5、运行cordova build android进行打包
vue项目打包成移动端app
05-26
要将Vue项目打包成移动端app，你可以使用一些工具，比如： 1. Apache Cordova：Cordova是一个开源框架，可以将Web应用程序打包为本机应用程序，并且适用于多个平台，包括iOS和Android。你可以使用Cordova将Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值