一.准备环境
1.安装node和npm;
#npm
2.安装好vue环境:
3.安装好cordova,官网连接地址:http://cordova.axuer.com/#getstarted
#npm install -g cordova
二.创建项目
1. 创建vue项目;
2. 在vue的项目文件目录中创建一个cordova项目javascript
#cordova create path(文件夹名字)id(应用id名字)name(应用名字) exmple:cordova create myproject com.example.myproject testpro (这个时候能在vue目录中多了文件夹) #cd 文件夹名字 #cordova platform add ios #cordova platform add android (运行add或者remove平台的命令将会影响项目 platforms的内容,在这个目录中每一个指 定平台都有一个子目录) #cordova platform ls (检查你当前平台设置情况) 【注意:我使用的设备是mac,因为androidsdk的gredla版本过低就报错,解决办法是下载一个最新的版本https://gradle.org/install/ ; 而后配置Gradle环境; 个人本机Gradle路径是 /Users/xxx/Downloads/gradle-4.6; 1.打开mac终端,在终端中输入:open -e .bash_profile,打开.bash_profile文件;若是报错说没有这个文件,就新建一个vim ~/.bash_profile; 2.编辑.bash_profile文件,在.bash_profile文件中输入下面内容: GRADLE_HOME=/Users/xxx/gradle/gradle-3.3;(Gradle的本机路径) export GRADLE_HOME export PATH=$PATH:$GRADLE_HOME/bin 3.保存.bash_profile文件,在终端上执行source ~/.bash_profile,更新.bash_profile文件,在终端上执行gradle -version,查看是否配置成功。从新进入到vue的cordova目录运行#cordova platform ls】 要构建和运行App,你须要安装每一个你须要平台的SDK; 三.准备打包工做 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:;">这个可能致使页面样式改变,若是改变则不加,不然仍是建议加上。这段主要是防止跨站脚本攻击。 引入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中的 assetsSubDirectory: 'static', assetsPublicPath: '/', 为 assetsSubDirectory: '', assetsPublicPath: '', 运行 #npm run dev 看看是否可以运行起来,若是正常说明到这里是没有问题的(注意这里运行的时候须要将document.addEventListener注释,由于在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。 四.打包 1.先在vue项目中运行 #npm run build 执行完成后会生成一个dist文件夹,找到这个文件夹将里面的全部文件复制到你的cordova项目的www文件夹下替换它原有的文件。而后就能够执行 2.cordova目录中运行 #cordova build android 会生成一个可执行的apk文件,安装便可。到这里就完成了咱们vue项目的打包。 【注意:若是vue项目在运行npm run dev或者npm run build的时候遇到问题通常不是代码出错的话能够将node_modules文件夹删除使用npm install安装。 若是是由于eslint致使代码检查不经过的话,能够将Vue项目的build文件夹下的webpack.base.config文件中的rules { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, 注释就好】