webstorm+cordova 打包apk

最新推荐文章于 2024-05-30 09:11:57 发布
最新推荐文章于 2024-05-30 09:11:57 发布
阅读量1.4k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WLN123201010/article/details/89814907
本文介绍了如何配置Java、Android Studio、Gradle环境，并使用WebStorm结合Cordova打包Android应用APK。详细步骤包括环境变量配置、Cordova项目创建、Vue项目内容复制、Cordova平台添加以及最终的APK构建过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、配置各种环境
1、下载jdk
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
next就可以
2、安装android studio(主要是下载sdk)
https://developer.android.google.cn/studio
不断next
3、下载gradle
http://services.gradle.org/distributions/
4、配置jdk，gradle 环境变量
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_40.jdk/Contents/Home （jdk安装路径）
export PATH= J A V A H O M E / b i n : JAVA_HOME/bin: JAVAH​OME/bin:PATH（直接粘贴）
export CLASSPATH=.: J A V A H O M E / l i b / d t . j a r : JAVA_HOME/lib/dt.jar: JAVA

最低0.47元/天 解锁文章

200万优质内容无限畅学
WLN123201010
关注
webstorm开发的Vue项目在手机调试以及打包成apk（以及打包后页面空白问题）
qq_41836598的博客
07-16 2845
一、为避免打包完成后的index.html打开空白问题，打包前需要更改下几个配置 1.config下的index.js文件（解决路由路径问题） 找到index.js，将 assetsPublicPath: ‘/’ 改为 assetsPublicPath: './' 2.build文件夹下的util.js文件（解决图片路径问题） 在if (options.extract) 中添加 ...
vue打包成app应用，Webstorm+cordova打包vue成Android项目
weixin_43796132的博客
06-27 909
目录一：万事开头难，准备环境；若已搭建好环境请忽略跳到第二步1. 安装java sdk2. 安装java sdk3. 安装gradle二:：搭建cordova平台1. 全局安装cordova2. 创建cordova项目3. 假设你已经有了Vue项目那么进行build编译得到dist文件夹，复制vue项目中 dist 下面的文件粘贴到创建好的 android-app 项目的 www 文件下4. 打包android项目三： 生成apk1. 生成签名，要是不生成签名；apk会安装失败2. 然后在android-a
移动端选型：WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案
LlanyW的专栏
02-11 1万+
而vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。nvue是native vue的缩写，是uni-app的一种渲染方式。是native vue的缩写，是uni-app的一种渲染方式。
Webstorm+cordova打包vue成Android项目
BADAO_LIUMANG_QIZHI的博客
08-07 3313
一、新建vue项目  1.打开cmd命令，输入：npm i -g npm    这个命令类似用npm自身来install自己，即升级npm 2.再输入:npm install -g vue-cli  这个命令是用npm全局安装vue-cli。 vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple...
APICloud webstorm本地打包 apk出不来的问题
txl910514的专栏
11-26 3562
用 dir /a /s java.exe 在cmd里根目录下面查找java.exe的文件； 然后把 C:\Users\txl91\WebstormProjects\workspace\webStorm-APICloud\jre\bin这个路径加入到环境变量中； 如何加环境变量？ 我的电脑右键，点击属性，再点击高级系统设置，再点击环境变量，在系统变量中选择Path,点击编辑，在点击新建，将路径
vue开发移动端android打包Webstorm+cordova打包vue成Android项目
Two_Too的专栏
10-18 6477
一. 打包vue vue项目开发完成后， 使用 npm run build 打包成功之后，打开生成的dist文件夹中的 index.html，看看是不是ok的，没问题就继续下一步。 二. 使用cordova打包android项目 1. 新建cordova项目 全局安装cordova： npm install -g cordova 创建cordova项目： cordova c...
vue+cordova移动端Android开发环境配置
u012211003的博客
07-08 1534
vue+cordova移动端Android开发环境配置配置Vue开发环境安装Cordova配置Android开发环境安装jdk配置Android SDKa. 下载并安装Android Studiob. 下载并配置SDKcordova+vue生成Android APKa. 安装使用WebStormb. cordova项目中创建vue项目c. cordova+vue配置并打包测试APK 配置Vue开发环境 这里不做叙述，可查看我的文章： 初学者如何配置vue开发环境 安装Cordova 命令行中输入命令： np
webstorm打包html
最新发布
03-15
如果目标不仅仅是简单的网页而是移动应用程序，则可考虑采用 Apache Cordova 技术，在此框架支持之下利用 WebStorm 开发跨平台 APP 并导出 Android/iOS 可安装包(APK/IPA)[^3]。 --- ### 注意事项 - 如果仅需单纯...
Webstorm全程开发uni-app项目【Vue3+Vite+Typescript】【MacOS运行 npm run dev:app打包的dist/dev/app默认为系统文件,必须更换为管理员】
weixin_43343144的博客
01-07 1697
第一步：使用官方【命令方式创建项目】参考：uni-app官网 也可以通过webstorm-uniapp插件来创建uniapp项目【和官网那种方式是一样的】参考：Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案_uniapp support-优快云博客
网页应用打包安卓App (详细教程)
羊叔的博客
05-30 4682
applicationId为创建时的包名，compileSdkVersion为编译版本， minSdkVersion为兼容最小的版本号，targetSdkVersion为目标版本， 有兴趣的可以百度一下三者之间的区别和联系。” versionCode需要设定一个数值，一般为1， 每次更新版本时versionCode的值都要比前一个设置的值大， 否则无法正常安装，versionName一般填写主版本号次版本号和修正号， 如图中的“1.0”为最初版本号，其余的可以自行查阅。就可以正常使用AS的模拟器了。
H5开发，打包成APK
zh5220909的博客
05-07 4113
说明： 最近在做H5的开发，虽然只是做页面，但也想学习一下整个流程的开发，也想自己弄个APP玩儿一下然后就搜罗了一下文档。 APP的开发模式： 1、原生APP 2、网页APP（webapp） 3、H5 app（混合APP） 前两者就不多说了，我们要弄的就是H5，以前我一直以为H5开发就是HTML5开发，其实不然，这里引用阮一峰老师的文章： “H5 这个词，可以理解成就是混合...
在Mac平台下搭建WebStorm+PhoneGap/Cordova开发App应用
蓝山咖啡的博客
12-23 1万+
IntelliJ IDEA 出品的Webstorm是javascript,html5等前端开发的最好的工具之一，本文介绍下如何在Mac环境下配置
【Android app环境搭建重磅推荐】Cordova+java1.8【jdk8】+SDK+Gradle+webstorm开发第一个APP的流程和环境搭建【太多细节要注意了，好好整理一下】
weixin_43343144的博客
04-06 592
常见错误一：（这个错误是【第三步】没做，没有安装build-tools工具，运行一下【第四步】SDM Manager管理器中默认安装即可） 常见错误二：（maven-ant-tasks.2.1.3.jar在线下载失败的问题） 解决办法：手动下载，并放入图片中的目录即可 build常见错误三：没有安装Gradle（选择手动安装）： 解决办法参考：https://blog....
前端开发利器webStorm 3.0配置使用
weixin_34038293的博客
01-16 411
  合适的工具会事半功倍，当然也得把握分寸，要不就成了会得越多干的越多的“苦力者”。编辑类软件层出不群，各有所长，各有所短。找到一个合适的还真是难。还好有webstorm的出现，最近又是3.0的新版本发布。为什么这么说呢，她与其它的编辑器有什么不同：1. 任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的...
如何将前端页面打包成本地app？
qq_34639706的博客
08-23 7363
大家都知道H5页面怎么在手机浏览器里测试，但是如何能打包成APP测试呢？因为本人的手机是IOS系统，如果用Xcode打包需要开发证书，貌似99美元一年。意外发现一个叫Hbuild的软件，简单好用，下面做个简单的使用分享：下载地址首先到网上下载一个Hbuild,->戳（windows）一、安装成功后打开选择暂不登陆，进入主界面如图： 二、把自己打好的包导入到hbuild三、选择对应选项及文件夹四、电脑
cordova打包安卓webapp
u010537398的博客
08-26 6848
什么是cordova cordova是一个开源的程序开发框架，前身是PhoneGap，后来捐给了Apache，两个名字都有在用，cordova是的主要功能是实现应用程序多平台开发，它的主程序是一个网页应用，然后适配到各个平台上 安装android studio 想要打包安卓app，本地必须要有安卓环境啊，我选择直接装android studio，这样android sdk等一系列环境配置
使用webstorm建立的vue项目，及使用hbuilderx进行app打包
qq_40980455的博客
03-13 2809
1.首先使用webstorm 进行项目的创建，模板使用webpack 全局安装vue-cli npm install -g vue-cli 全局安装 webpack npm install webpack -g 2.查看到项目目录结构如下 3.在这样直接进行npm run dev,编译器可能会报错，由于是有eslint的语法检查,因此在settings里边关闭检查。 4.写好自己的项目之后...
html5 如何打包成apk，将H5封装成android应用APK文件的几种方法
热门推荐
北京土豆(qqxinxi) 的专栏
05-08 7万+
使用html5+JavaScript开发移动Web App。将其简单封装成APK文件！
webstorm+vue3+vite+Electron
01-16
### WebStorm 配置 Vue3 Vite Electron 项目教程 #### 创建新项目 在 WebStorm 中启动一个新的 Vue 项目并选择使用 Vite 工具链来初始化项目结构。这一步骤会自动设置好基础的构建工具和支持模块热替换等功能[^1]。 ```bash npm create vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` #### 安装 Electron 及其依赖项 为了使应用程序能够在桌面环境中运行，需通过 npm 添加 Electron 到开发依赖中： ```bash npm install electron --save-dev ``` 此命令会在 `package.json` 文件里注册 Electron 并下载必要的库文件[^4]。 #### 修改 package.json 脚本部分 为了让 WebStorm 更方便地管理不同平台下的编译过程，在 `package.json` 的 scripts 字段添加如下脚本来支持跨平台打包操作： ```json { "scripts": { ... "start-electron": "electron .", "build-win": "vite build && electron-builder build --win" } } ``` 这些自定义指令允许开发者轻松切换到不同的操作系统上进行测试和分发准备。 #### 设置主进程 (Main Process) 创建名为 `main.ts` 或者 `main.js` 的入口文件用于控制窗口行为和其他原生功能调用；同时也要记得引入渲染器端通信所需的预加载脚本(preload script)[^3]。 ```typescript // main.ts import { app, BrowserWindow } from 'electron'; import path from 'path'; const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, }, }); win.loadURL('http://localhost:3000'); }; app.whenReady().then(() => { createWindow(); }); ``` #### 编写 Preload Script 按照安全最佳实践建议，在 `src/electron/preload.js` 下编写一段简单的 JavaScript 来处理前后端之间的消息传递逻辑[^3]。 ```javascript window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector); if (element) element.innerText = text; }; for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]); } }); ``` #### 使用 WSL 进行 Linux 环境下 Build 如果希望利用 Windows Subsystem for Linux(WSL)来进行更高效的构建流程，则可以在 WebStorm 终端选项卡中开启 WSL 支持，并确保所有 NodeJS 和其他 CLI 工具都已正确安装于对应的发行版之中。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值