Webstorm+cordova打包vue成Android项目

一、新建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 项目名和vue init webpack 项目名两种。

当然首先你的安装vue，webpack，node等一些必要的环境。

3.再输入：vue init webpack vue-app

初始化新建项目，这里vue-app是项目名，按照它的提示，一步步输入项目相关信息。

项目初始化完成后

按照它的提示

首先：cd vue-app (进入项目文件夹)

然后：npm run dev（运行项目）

运行结束：

此时打开浏览器，输入：localhost:8080 ,看到下面界面则成功启动

此时要想结束运行，在命令行中按ctrl+c ，再输入Y确认，即可关闭。

4.打包项目

输入：npm run build

也可以使用：npm run build --report

后者会提示一个网址

打开这个网址：

5.打包之后

打包之后的文件会放在项目根路径下得到dist里面

二.新建cordova项目

打包好的vue H5项目需要使用cordova来打包成Android项目，支持跨域。

1.新建cordova项目

先：npm install -g cordova

全局安装cordova

再：cordova create cordova-app com.ysh mapp

创建一个cordova项目，名称是mapp,包名是com.ysh,项目名是cordova-app

2.复制和替换

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

3.进入cordova项目

输入：cd cordova-app

4.打包android

输入：cordova platforms add android --save

这一步完成后，在项目platforms文件夹下会发现多了Android文件夹

三、打包apk

1.打开webstorm,选择打开，找到cordova项目的路径，选择打开

2.点击webstorm下的Terminal，输入：cordova build android --release

打包完成后会提示apk的输出目录：

找到此目录：

这是在调试环境下的apk，如果是正式环境，还得需要生成签名、添加签名等。

Webstorm+cordova打包vue成Android项目相关推荐

用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder , ...
Cordova打包Vue项目（修改APP logo name）
修改log 可参考官方链接 https://cordova.apache.org/docs/en/9.x/config_ref/images.html 准备四张png格式的需要替换的logo图片,大小 ...
ant自动打包多个android项目为apk
为什么80%的码农都做不了架构师?>>> 最最近项目要实现一个自动打包的功能,网上参考了不少资料,觉得还是使用ant打包比较方便. 到最后的写出的配置信息如下所示: build ...
Cordova打包教程知识体系整理（Vue项目打包成ipa）
使用工具: 1.Webstorm2017 Webstorm2017安装以及破解和汉化: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Cordova打包的Vue项目在IOS无法拉起支付宝和微信支付
背景在用Cordova打包Vue项目并添加IOS平台时,在服务器后台没有报异常,且支付宝以及微信的调用的链接在浏览器中能正常调用时,此时查看Cordova项目下的config.xml文件. 解决 ...
android项目打包工具,Android多渠道打包工具:apptools
支持跨平台.命令行.多渠道.平均6秒打一个包多种打包方式添加assets打包方式解决360等加固不能再打包问题使用java -cp命令可选择打包方式 java -cp apptools.jar ...
Android-Ant自动编译打包android项目 -- 2 ----签名与渠道包
上篇介绍了怎么使用ant自动编译打包现有的android项目,这篇将继续介绍如果如何在ant打包应用的时候加入签名信息以及自动打包渠道包. 1. 加入签名信息: 在项目的根目录下建一个ant.prop ...
Cordova嵌入Android项目(CordovaWebView)
Cordova嵌入Android项目(CordovaWebView) 首先,Cordova官方是有介绍如何将Cordova嵌入Android项目中的,链接Embedding Cordova WebVi ...

Webstorm+cordova打包vue成Android项目

一、新建vue项目

Webstorm+cordova打包vue成Android项目相关推荐

最新文章

热门文章