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

最新推荐文章于 2023-11-30 13:58:03 发布

梦想作坊

最新推荐文章于 2023-11-30 13:58:03 发布

阅读量701

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Philo_W/article/details/79010035

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：安装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项目的打包。

梦想作坊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目用cordova打包app参考文档

第一步：安装node.jshttps://nodejs.org/zh-cn/download/ http://blog.csdn.net/u010255310/article/details/52205132第二步：安装JDKhttp://blog.csdn.net/dr_neo/article/details/49870587第三步、下载并安装AndroidSDKhttp
复制链接

扫一扫