使用Cordova打包Vue项目
因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP.
一个小白的孤军奋战史, 记录一下, 以备后用....
第一步: 安装cordova
在命令窗口执行:
npm install -g cordova
第二步: 新建一个cordova项目
同样的在命令窗口执行命令:
cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android (这一步是加入android运行平台)
第三步: 修改你的vue项目
1. 把cordova项目的index.html里面的meta标签和cordova.js引用复制到vue项目的index.html
2. 修改config文件夹中index.js文件
build中的
修改为
3. 运行 npm run dev
如果可以运行, 就证明没有问题, 继续下一步
4. 修改main.js文件
增加红线部分标注出来的内容
第四步: 将vue文件放到cordova项目中并打包
1. 先打包vue项目, 运行
npm run build
将生成的dist文件夹中的所有文件, 复制到cordova项目中的www文件夹中, 替换掉它原有的那些文件
2. 在你的cordova项目中 , 运行
cordova build android
运行成功之后, 会在你的cordova项目文件夹中的 platforms->android->app->build->outputs->apk 文件夹中生成一个 apk 文件, 就可以安装到安卓手机上了
(不知道会不会有其他情况是生成在别的文件夹下的, 这里只是讲我的情况)
这一步涉及到的一些问题, 在下面进行说明, 如果你在这一步就运行成功, 那么以下内容就可以不用看了
接下来讲解下载cordova build android 这一步中我出现的问题
PS: 这一段花了三天的时间, 所以可能也记不太清楚先后了, 关于cordova android的内容我就都放在一起了
1. 需要先安装一个 android studio
https://developer.android.google.cn/studio/
这是安装地址, 我选择的是一路盲装...就是默认默认默认
2. 打开android studio, 找到 file 中的 setting 选项
3. 因为我在执行 cordova build android 的时候报的错误, 那个报错忘记截图了, 大概好像是
license for package Android SDK Platform 27 not accepted (意思应该是我少了一个啥)
所以我在
找到了这个, 也算是瞎蒙吧, 提示我的是27, 刚开始打开的时候我的这个Android 8.1 后面那个API Level 27 这一行 后面是 north installed, 然后我就勾选了, 然后选择了下面的apply, 将这个安装了.
4. 等安装结束之后, 再次在自己的cordova项目里面执行
cordova build android
没有报错, 顺利打包成功, 安装到自己的手机上, 也是可以运行的, 至此, 顺利完成打包!
感言:
现在记录下来, 发现步骤真的是很简单了, 但是在cordova build android 那一步上却卡了很久, 当问题顺利解决掉的时候心里也是很有成就感的.
使用Cordova打包Vue项目的更多相关文章
- 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
- Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- Cordova打包vue项目(Android)
准备工作: 安装好必要环境: vue-cli,webpack,node.js,android环境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/p ...
- electron打包vue项目
electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 使用electron-packager electron-builder electron-updater 打包vue项目,支持在线更新
1.如何用electron-packager electron-builder打包vue项目,打包成桌面程序. 步骤一. 执行npm run build 打包你的vue项目. 打包成功后,生成dist ...
- nw打包vue项目 安装包
接着上篇nw打包vue项目exe中: copy /b nw.exe+dome.nw dome.exe 出现了dome.exe文件之后,要是打算打包成为安装包,网上推荐的是Inno Setup Comp ...
- docker 运行jenkins及vue项目与springboot项目(三.jenkins的使用及自动打包vue项目)
docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...
- 通过cordova将vue项目打包为webapp
准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 可以看下我的github:https://github.com/ ...
随机推荐
- 深入剖析Kubernetes学习笔记:深入理解镜像(07)
一.容器里的进程看到的文件系统又是什么样子呢? 1.你会看到好多宿主机的文件 [root@k8s-master ~]# vim ns.c [root@k8s-master ~]# gcc -o nl ...
- Python认识到放弃
基础入门 计算机硬件基础 变量 数据类型 基本运算符 变量常量 流程控制 数据类型 数字,字符串,列表 元组,字典,集合 字符编码 python2 python3 文件处理 文件读写 指针移动 函数 ...
- python中__str__与__repr__的区别
__str__和repr __str__和__repr__都是python的内置方法,都用与将对象的属性转化成人类容易识别的信息,他们有什么区别呢 来看一段代码 from math import hy ...
- knockoutjs复杂对象的可观察性
问题 对于一般数据结构: 1. 对于基本类型的数据的变更的可观察性(observable), 可以使用 ko.observable(xxx) 来声明一个 observable对象, 或将其绑定到视图 ...
- Codeforces Round #404 (Div. 2) D. Anton and School - 2
题目链接 转自 给你一个字符串问你能构造多少RSBS. #include<bits/stdc++.h> #define LL long long #define fi first #def ...
- idea2018注册
1.在网上随便找一个注册码,lanyu的即可,注册时会被提示此注册码已被取消. 2.修改hosts文件,目录:C:\Windows\System32\drivers\etc\hosts,在文件中添加 ...
- hash(散列函数)
一直对哈希不太理解,今天上网搜了一下,总结出以下几点,希望可以对大家的理解有所帮助 1)概念 哈希就是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换成固定长度的输出,该输出就是散列 ...
- docker使用方式
docker使用方式安装:1.安装依赖 yum install -y yum-utils \ device-mapper-persistent-data \ lvm2 2添加yum源 yum-conf ...
- MySQL插入中文数据出现?号
原文转载自:https://blog.csdn.net/LynneZoe/article/details/79174119 运行环境:win10 mysql版本:Mysql5.6 做一个项目的时候,向 ...
- jquery获取value值时将数字型字符串前面的0自动截取处理方法
<li class="cwhite" value="02" id="02" onclick="getQuestionList ...