cordova 整合 webpack vue
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