您的位置：首页 > 移动开发

vue项目用cordova打包app参考文档

2018-01-09 10:30 726 查看

第一步：安装node.js

https://nodejs.org/zh-cn/download/
http://blog.csdn.net/u010255310/article/details/52205132

第二步：安装JDK

http://blog.csdn.net/dr_neo/article/details/49870587

第三步、下载并安装AndroidSDK

http://blog.csdn.net/dr_neo/article/details/49870587

第四步：安装cordova

http://cordova.apache.org/
http://www.jianshu.com/p/25d797b983cd

第五步：新建cordova项目

http://cordova.apache.org/
http://www.jianshu.com/p/25d797b983cd
 

第六步：创建vue项目

https://cn.vuejs.org/v2/guide/installation.html
http://www.jianshu.com/p/25d797b983cd

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:;">

这个的时候可能导致页面样式改变，如果改变则不加，否则还是建议加上。
如果打包成功安装后界面比率过大或者过小可以修改以下meta标签的值，本人项目修改为以下值
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=0.35, minimum-scale=0.35, width=device-width">

 
2、然后引入cordova.js

<body>
  <div id="app"></div>
  <script type="text/javascript" src="cordova.js"></script>
</body>


3、然后修改src中的main.js为以下代码

document.addEventListener('deviceready', function () {
  new Vue({
    el: '#app',
    router,
    store,
    $,
    render: h => h(App)
  })
  window.navigator.splashscreen.hide()
}, false)
new Vue({
  el: '#app',
  router,
  store,
  $,
  render: h => h(App)
})

4、最后修改config文件夹中的index.js文件

修改build中的

assetsSubDirectory: 'static',
assetsPublicPath: '/',


改为

 assetsSubDirectory: '',
assetsPublicPath: '',


 

看看是否能够运行起来，如果正常说明到这里是没有问题的。

5、运行


npm run dev

第七步：将vue文件放到cordova项目中并打包

1、先在vue项目中运行


npm run build

执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。

2、然后就可以执行

cordova build android

在文件夹platforms\android\build\outputs\apk下会生成一个可执行的apk文件，安装即可。
到这里就完成了我们vue项目的打包。
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航