通过cordova将vue项目打包为webapp
准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境。下面开始对vue.js项目进行打包,打包环境为Android。
可以看下我的github:https://github.com/padipata ,里面有我自己写的vue项目,喜欢的给个关注呗。
1.添加cordova项目
$ cordova create myApp1 org.apache.cordova.myApp myApp2
其中:
- myApp1:cordova目录名
- org.apache.cordova.myApp: 包名
- myApp2: 项目名(在config.xml的<name>中查看)
2.在vue中添加cordova的配置
myApp1/www/index.html----->vue/index.html
- 将myApp1/www/index.html中所有的<meta>拷贝到vue/index.html中
- 将将myApp1/www/index.html中<script>关于cordova.js的引用拷贝到vue/index.html中
myApp1/www/js/index.js----->vue/vuex/main.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
1)内容拷贝到vue/src/vuex/main.js中
2)onDeviceReady时启动app
onDeviceReady: function () {
//app.receivedEvent('deviceready');
appRouter.start(App, 'app')
window.navigator.splashscreen.hide()
}
3.创建android项目
终端中进入到myApp1 项目,执行以下命令:
cordova platform add android 这时候vue项目中会得到一个android文件夹,里面包含一个测试版本的apk,可以传输到手机上调试。
4.添加cordova插件
终端中进入到vue项目,执行以下命令:
cordova plugin add xxxx
5. 构建 vue项目
许多人掉过这个坑,打包出来的apk是一个cordova默认的空白项目,因此,需要在打包vue之前在这里把配置文件修改过来。
终端中进入到vue项目,执行以下命令:
npm run build
6.文件转移
将dist文件夹下的文件,拷贝到cordova/platforms/androd/assets/www目录下 (index.html替代掉原本的)
7.构建cordova项目
从终端进入到myApp1/platforms/android/cordova目录下,执行以下命令:
cordova build android //构建apk
配置JDK环境(这里只对mac os进行记录,Win系统请自行脑补):
cd ~ 进入到 ~ 目录
touch .bash_profile
vi .bash_profile 使用vi编辑器编辑 .bash_profile文件
然后输入 i ,在vi编辑器里面输入 i 的意思是开始编辑。
vi编辑器里面的内容如下:
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home
CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOME/bin:$PATH:
export JAVA_HOME
export CLASSPATH
export PATH
然后退出vi编辑器使用如下命令:(个人习惯 :wq!回车 )
1. 输入 ese
2. 输入冒号 : wq
3. 保存退出
如果以上修改完毕切正确,那么接下来就是让配置的环境变量生效,使用如下命令:
source .bash_profile
完毕以后查看下当前的java 版本是否正确输入如下命令:
java -version
如果是预想中的1.8,那么恭喜你,你这个时候就可以执行: cordova build android
cordova run android //构建apk,并安装到连接的设备上 (按个人需求)
通过cordova将vue项目打包为webapp的更多相关文章
- cordova将vue项目打包成apk
1,若vue项目不在cordova项目里,直接把它复制进来,避免改动代码的麻烦 2,直接按照以下链接进行操作即可 链接:https://www.cnblogs.com/qirui/p/8421372. ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- vue项目打包踩坑记
基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...
- vue项目打包-2-九五小庞
vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...
- vue项目打包成html,在本地点击直接能打开
默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...
随机推荐
- 爬虫学习之-git拉取远程错误
本文讲的是把git在最新2.9.2,合并pull两个不同的项目,出现的问题如何去解决 如果合并了两个不同的开始提交的仓库,在新的 git 会发现这两个仓库可能不是同一个,为了防止开发者上传错误,于是就 ...
- NLP 入门
作者:微软亚洲研究院链接:https://www.zhihu.com/question/19895141/answer/149475410来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- 迭代器 每迭代一次 指针往下面移动一次 除非JVM回收了内存 否则 他的指针不会回到原地
迭代器 每迭代一次 指针往下面移动一次 除非JVM回收了内存 否则 他的指针不会回到原地
- BZOJ 2190 仪仗队(线性筛欧拉函数)
简化题意可知,实际上题目求得是gcd(i,j)=1(i,j<=n)的数对数目. 线性筛出n大小的欧拉表,求和*2+1即可.需要特判1. # include <cstdio> # in ...
- 【Java】Java CSV操作代码
CSV是逗号分隔文件(Comma Separated Values)的首字母英文缩写,是一种用来存储数据的纯文本格式,通常用于电子表格或数据库软件.在 CSV文件中,数据“栏”以逗号分隔,可允许程序通 ...
- "流量监管"和"流量整形"的区别
"流量监管" (Traffic Policing) 就是对流量进行控制,通过监督进入交换机端口的流量速率,对超出部分的流量进行"惩罚" (采用监管方式时是直接丢 ...
- [BZOJ2432][Noi2011]兔农 矩阵乘法+exgcd
2432: [Noi2011]兔农 Time Limit: 10 Sec Memory Limit: 256 MB Description 农夫栋栋近年收入不景气,正在他发愁如何能多赚点钱时,他听到 ...
- 【BZOJ 1129】[POI2008]Per 二叉堆
这个东西读完题之后,就能知道我们要逐位计算贡献.推一下式子,会发现,这一位的贡献,是当前剩余的数字形成的序列的总数,乘上所剩数字中小于s上这一位的数的个数与所剩数字的总数的比.所以我们维护“当前剩余的 ...
- python基础----封装、封装与扩展性
从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫,小狗,小王八,还有egon和alex一起装进麻袋,然后把麻袋封上口子.但其实这种理解相当片面 首先我们要了解 要封装什么 你钱包的有多少钱(数 ...
- HDU 4584 splay
Shaolin Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Sub ...