Cordova+Vue开发Android应用
转载自：https://www.jianshu.com/p/037e4634432d一、安装 Npm这里就不给出具体安装了，可以百度一下或者参考下面链接。node.js安装 官方文档二、安装 Vue脚手架执行命令:cnpm install --global vue-cli三、安装 Cordova已经安装cordova则跳过,否则执行下面命令：npm ins...
转载自：https://www.jianshu.com/p/037e4634432d
一、安装 Npm
这里就不给出具体安装了，可以百度一下或者参考下面链接。
二、安装 Vue脚手架
执行命令:
cnpm install --global vue-cli三、安装 Cordova
已经安装cordova则跳过,否则执行下面命令：
npm install -g cordova执行命令:
cordova create hello com.example.hello HelloWorld参数说明:
| 名称 | 必填 | 描述 |
|---|---|---|
| hello | 是 | 工程的文件夹名 |
| com.example.hello | 否 | 应用程序的id, 名如果不指定的话默认为io.cordova.hellocordova |
| HelloWorld | 否 | App的名称 |
五、添加Android平台
执行命令
cordova platform add android六、创建Vue项目 vue2官网
执行命令
vue init webpack vue-app在执行命令是会出现下面的配置选项，前3个分包为项目名称、项目描述、和作者。后面几个配置是js相关，一般没什么特殊要求可以按照下面配置。
最终的项目结构：
七、修改vue项目的index.html
1. 在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:;">导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。
2. 修改vue-app文件中config下的index.js的build配置项
3. body中引入cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
八、打包
1. 如果vue项目中修改或者添加了代码需要build到外层cordova项目的www文件中。(执行命令下面前，如果是新建的vue的项目别忘了先执行 npm i 这个命令去自带下载一下vue用到的组件。)
执行命令:(要cd到vue项目中执行)
npm run build执行此命令，如果cordova没有www文件夹，会创建该文件并将vue的代码添加进来。如果有www文件则不会重复创建，只会把vue文件添加进来。
2. 如果需要打包android的apk可执行下面命令
cordova build android3. 如果不需要打apk包，只要执行下面命令就可以项目运行在手机中。（主要手机要用数据线和电脑连接并开启usb调试的功能）
cordova run android上面都是debug调试的方式。当然正式发布的时候是不可能使用debug包的。打成签名包有几种方式。我用的是androidstudio自带的签名打包方式。下面我会给出来网上找的打包签名的方式。
Cordova相关连接：
Vue 2.0 + cordova 构建Android应用（一）
Vue相关连接：
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)