准备工作：

安装好必要环境: vue-cli，webpack，node.js，android环境 （http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html）；

个人觉得，android环境是最麻烦的，只要配置好，后面的都比较简单。

开始：

第一步：安装cordova

如果已经安装则直接跳过，否则执行以下命令：

npm install -g cordova

第二步：新建cordova项目

分别执行3个命令

cordova create cordovaApp com.cordova.testapp

cd cordovaApp

cordova platform add android

其中：

  • cordovaApp：  cordova目录名
  • com.cordova.testapp：  包名

执行完这3个命令之后，cordova项目就建立好了。

第三步：修改vue项目

本文章不提供vue项目

1.首先修改vue项目的index.html

在head之间加入

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

这里注意加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">可能导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。

在body之间加入引入cordova.js





<body>

    <div id="app"></div>

    <script type="text/javascript" src="cordova.js"></script>

    <!-- built files will be auto injected -->

</body>






2.修改config文件夹中的index.js文件


修改build中的






    assetsSubDirectory: 'static',

    assetsPublicPath: '/',




为






   assetsSubDirectory: '',

   assetsPublicPath: '',






3.在main.js里面添加（省略这步骤，打包后可能会导致出现空白页）




import VueCorvova from 'vue-cordova'

Vue.use(VueCorvova)




当然，vue-cordova需要在vue项目中引入,在vue项目终端执行




npm install vue-cordova --save




测试：


然后在vue项目终端运行




npm run dev




看看是否能够运行起来，如果正常说明到这里是没有问题的（注意这里运行的时候需要将document.addEventListener注释，因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件，打包在真机上才能实现监听）。


第四步：将vue文件放到cordova项目中并打包（成功后修改，只需反复该步骤即可）


1.先在vue项目中运行




npm run build




执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。


2.然后在cordova项目终端执行




cordova build android




会生成一个可执行的apk文件（cordova项目文件\platforms\android\app\build\outputs\apk\debug\app-debug.apk），拷贝到安卓手机安装即可。
												


											
Cordova打包vue项目(Android)的更多相关文章
	

    
								
  1. 教你用Cordova打包Vue项目
		
    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
    
		
    2. 
						
  2. 使用Cordova打包Vue项目
		
    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...
    
		
    3. 
						
  3. Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）
		
    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
    
		
    4. 
						
  4. electron打包vue项目
		
    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...
    
		
    5. 
						
  5. webpack打包vue项目之后生成的dist文件该怎么启动运行
		
    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
    
		
    6. 
						
  6. 使用electron-packager electron-builder electron-updater 打包vue项目，支持在线更新
		
    1.如何用electron-packager electron-builder打包vue项目,打包成桌面程序. 步骤一. 执行npm run build 打包你的vue项目. 打包成功后,生成dist ...
    
		
    7. 
						
  7. nw打包vue项目 安装包
		
    接着上篇nw打包vue项目exe中: copy /b nw.exe+dome.nw dome.exe 出现了dome.exe文件之后,要是打算打包成为安装包,网上推荐的是Inno Setup Comp ...
    
		
    8. 
						
  8. docker 运行jenkins及vue项目与springboot项目(三.jenkins的使用及自动打包vue项目)
		
    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...
    
		
    9. 
						
  9. 通过cordova将vue项目打包为webapp
		
    准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 可以看下我的github:https://github.com/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python3.x Day6 协程
			
    协程:#定义来自牛人alex博客协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈 ...
    
			
    2. 
						
  2. python 学习总结1
			
    计算机与程序设计 一.计算机的概念 1.计算机是根据指令操作数据的设备. 2.计算机主要包括两个功能性一个是功能性另一个是计算性 功能性是对数据的操作,表现为数据计算,输入输出处理和结果存储 可编程性 ...
    
			
    3. 
						
  3. POJ 1161 Walls（Floyd ， 建图）
			
    题意: 给定n个城市, 然后城市之间会有长城相连, 长城之间会围成M个区域, 有L个vip(每个vip会处于一个城市里)要找一个区域聚会, 问一共最少跨越多少个长城. 分析: 其实这题难就难在建图,  ...
    
			
    4. 
						
  4. 3D地形中的道路模拟
			
    笔者注: 这篇文章是我本人在2009年发表在cppblog的一篇技术文章,由于我的技术博客迁移至博客园,所以转载到了此,非盗文. 以下是正文: 前段时间被项目组长委派实现基于3D地形的道路系统.实现的 ...
    
			
    5. 
						
  5. 04004_使用JavaScript完成注册表单数据校验
			
    1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...
    
			
    6. 
						
  6. java基础之switch
			
    switch 语句由一个控制表达式和多个case标签组成. switch 控制表达式支持的类型有byte.short.char.int.enum(Java 5).String(Java 7). swi ...
    
			
    7. 
						
  7. 省市区名称code
			
    https://blog.csdn.net/hichinamobile/article/details/51725090 --省 create table t_base_provinces( id ) ...
    
			
    8. 
						
  8. PTA 02-线性结构3 Reversing Linked List   (25分)
			
    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/664 5-2 Reversing Linked List   (25分) Given a ...
    
			
    9. 
						
  9. 【USACO】wormholes 【暴力】
			
    题意:给出2K个平面上的点,给它们一一配对,问有多少种配对方法使得存在从某个点一直向右走会陷在循环里(K<=6) 思路:由于k很小,配对方法的话暴力枚举,然后判环,判环时需要注意的是一条直线上的 ...
    
			
    10. 
						
  10. 【二分+尺取】HDU 6119 小小粉丝度度熊
			
    http://acm.hdu.edu.cn/showproblem.php?pid=6119 [思路] 首先通过处理交叉的可以处理成不交叉的 然后二分查找答案 如何判断一个长度是否可行? 双指针O(n ...
    
			
    11.