cordova 是hybrid开发app的一个框架，通过js桥接原生api实现了js调用原生的一些功能；本打算学习下阿里的weex；可是一直打包不了，加上之前也用过cordova,打算使用cordova尝试一下；整合上vue这种开发界面的利器是不是更加爽呢？
1.环境搭建
> cordova环境搭建
由于我们使用cordova作为app开发框架，我们得先搭建cordova;cordova的安装可以使用npm yarn等安装；全局安装: npm install -g cordova
由于需要打包app自然需要android sdk 或者 ios sdk (土豪们的mac下xcode是要安装的)
可以参考官网: http://cordova.apache.org/#getstarted
> vue环境搭建
vue的环境搭建没什么难度吧，直接按照官网做就行
vue-cli的安装: npm install -g vue-cli
2.构建项目
创建项目由于是将cordova和vue整合,而vue使用webpack调试，发布；因此必须按照先 cordova 后 vue的方式进行；不过你可以尝试下先创建vue项目文件再创建cordova项目，看会报什么错。
> 搭建cordova项目
按照官网示例cordova create appName com.app.appName appName方式创建一个项目，生成如下结构项目文件：
添加android平台sdk：cordova platform add android
这是一个标准的cordova项目目录，接下来我们将在该目录下通过vue-cli添加vue项目文件到该目录
> 搭建vue项目
同样安装vue官网示例创建vue项目： vue init webpack appName ； 注意此时会提示已存在该文件夹，是否覆盖，如下图：
我们选择Y继续
好了，我们搭建好了vue的项目，进行appName项目目录，安装包 npm install
测试vue：npm run dev 正常打开http://localhost:8080/即为正常
此时项目结构如下：
3. 整合vue到cordova
如果熟悉cordova的人知道，cordova的html页面目录是存放在上图的www目录下的，而现在我们的vue源码目录再src下，打包后存放在dist目录下，cordova的入口文件www/index.html主要是引入了cordova.js作为桥接，如下代码:
<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 *"> ???????<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"> ???????<link rel="stylesheet" type="text/css" href="css/index.css"> ???????<title>Hello World</title> ???</head> ???<body> ???????<div class="app"> ???????????<h1>Apache Cordova</h1> ???????????<div id="deviceready" class="blink"> ???????????????<p class="event listening">Connecting to Device</p> ???????????????<p class="event received">Device is Ready</p> ???????????</div> ???????</div> ???????<script type="text/javascript" src="cordova.js"></script> ???????<script type="text/javascript" src="js/index.js"></script> ???</body>
对比上面的代码和vue打包后的index.html文件代码，我们可以发现，cordova引入了Content-Security-Policy来设置比较宽松的资源加载策略和防止xss攻击；我们将其加入到根目录vue的index.html的头部，同时我们将cordova.js也加入到页面底部，最终我们根目录下的页面代码如下：
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<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 *"> ???<meta name="format-detection" content="telephone=no"> ???<meta name="msapplication-tap-highlight" content="no"> ???<title>vue-cordova-app</title> ?</head> ?<body> ???<div id="app"></div> ???<script type="text/javascript" src="cordova.js"></script> ???<!-- built files will be auto injected --> ?</body></html>
此时，我们只要能将vue打包的目标路径定向到www目录即可完成整合。
接下来就是修改vue的webpack打包，（webpack高手请忽略）
- 修改 config/index.js 修改 ../dist 为 ../www
- 修改 assetsSubDirectory 为 ‘./‘
- 修改 assetsPublicPath 为 ‘‘
上述修改就将webpack打包目标路径改为www，将资源路径由dist/static/js改为了www/js目录、dist/static/css 改为了 www/css目录。
执行命令npm run build 打包试试。
最后再cordova run android试试
好了，总算敲完了...
cordova 整合 webpack vue
原文地址：https://www.cnblogs.com/zzsdream/p/10025805.html