话不多说，直接上步骤：
1.新建cordova项目。
cordova create cordovaApp
2.新建vue项目。(不会新建vue项目的同学去看vue官网)
……
vue init webpack myApp
……
3.把vue项目放进cordova项目文件夹下（就放在最外层目录）。
4.进入到vue项目目录
修改vue项目下的index.html，在head标签内加入以下
<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标签，是CSP（内容安全策略），用来减少跨站脚本攻击，只允许本站资源访问。但如果加的话，在开发过程中，浏览器访问时需要做跨域处理。请看 http://www.jianshu.com/p/b1db8d9dfcf7。
<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:;">
引入cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
然后修改src中的main.js为以下代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);
最后修改config文件夹中的index.js文件
将
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
……
}
修改为
build: {
// Template for index.html
index: path.resolve(__dirname, '../../www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../www'),
assetsSubDirectory: '',
assetsPublicPath: '',
……
}
5 .对Vue工程进行build，编译之后打包生成的代码自动跑到cordova项目目录下的WWW文件下
cd 到Vue的myApp目录下，执行npm run build
6.进入到cordova项目目录
cordova platform add android
7.webapp如果用到cordova插件，则在cordova目录下添加插件，在vue目录下的src文件夹中编写使用插件的代码)
cordova plugin add <插件名>
8.在cordova项目目录下进行打包
cordova build android
PS：每次打包都从新npm run build然后cordova build android。
网友评论