1.配置安卓环境
(1)下载JDK和JRE,安装(通常JDK会集成JRE,所以只需安装JDK就好)JDK一定要是 8 版本(JDK1.8),Down了个10版本的差点配到吐也没成功,这是个惊天神坑
(2)下载Android SDK,双击安装,复制下安装目录
(3)配饰环境变量:系统 => 高级系统设置 => 环境变量 =>系统变量 => 新建
新建一个ANDROID_HOME,值是sdk安装路径
新建一个JAVA_HOME,值是JDK安装路径
新建一个CLASSPATH,值是 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; (最前面有个点)
找到PATH,点击编辑,添加SDK目录下的platform_tools和tools路径,再添加一个JDK下的bin路径
2.构建VUE项目
使用vue-cli正常构建,撸代码
3.使用Cordova搭建打包环境
npm i cordova -g
cordova creat cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android
4.修改vue项目
(1)在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">
第一句可以不用加,加上可以防止跨站脚本攻击,但也有可能导致页面乱套
然后引入cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
修改src下的main.js为
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App } })
window.navigator.splashscreen.hide()
}, false);
最后修改config文件夹下的index.js
修改build中的
assetsSubDirectory: 'Static',
assetsPublicPath: '/',
为
assetsSubDirectory: ' ',
assetsPublicPath: ' ',
然后运行
npm run dev
注释掉main.js的document.addEventListener('deviceready', function() { }),因为这个在浏览器里不识别,在APP里才可以此时如果能正常跑起来,那就没问题了。(会报一个缺少左尖角的错,不用管)
5.将VUE项目打包
npm run biuld
将生成的dist文件夹下的文件全部复制,替换掉刚刚新建的cordova项目里面的www文件夹内的东西,然后在终端进入cordova项目文件夹,运行打包命令
cordova build android
会生成一个apk文件,然后放到手机里,安装即可
6.注意事项
(1)配置安卓环境非常麻烦,而且全他妈是坑,谨慎,心态放平,版本压低
(2)首次打包时间会非常长,我花了25分钟,因为npm要去下载gradle,不太大,但是不科学上网的话会奥比慢
(3)头发不易,且敲且珍惜