用Cordova打包Vue项目
来源:互联网 发布:qq for ubuntu 下载 编辑:程序博客网 时间:2024/05/17 02:36
原文链接地址:http://blog.csdn.net/u010730897/article/details/71713556
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。
据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目:
第一步:安装cordova
如果已经安装则直接跳过,否则执行以下命令:
- 1
- 1
如果这个命令都不会运行,那我建议你不要继续往下看了。
第二步:新建cordova项目
执行命令
- 1
- 2
- 3
- 1
- 2
- 3
到这里我们的cordova项目就创建好了。
第三步:修改vue项目
如果你没有vue项目的话,自行百度去新建一个vue项目吧。
首先修改vue项目的index.html
在head之间加入
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
这里注意加入<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
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
然后修改src中的main.js为以下代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
最后修改config文件夹中的index.js文件
修改build中的
- 1
- 2
- 1
- 2
为
- 1
- 2
- 1
- 2
然后运行
- 1
- 1
看看是否能够运行起来,如果正常说明到这里是没有问题的。
第四步:将vue文件放到cordova项目中并打包
先在vue项目中运行
- 1
- 1
执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。
然后就可以执行
- 1
- 1
会生成一个可执行的apk文件,安装即可。
到这里就完成了我们vue项目的打包。
友情提示:
如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。
如果是因为eslint导致代码检查不通过的话,可以将Vue项目的build文件夹下的webpack.base.config文件中的rules
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这段代码注释即可。
- 用Cordova打包Vue项目
- Cordova打包Vue项目
- 教你用Cordova打包Vue项目
- 通过cordova将vue项目打包为Android app
- Cordova-----5、打包Cordova项目
- Cordova+Vue 项目初始化
- cordova学习七 项目打包
- vue项目打包App
- Android/Ios 运行Cordova打包Vue的WebApp
- cordova 打包ionic2项目遇到的坑
- 关于Cordova项目的打包配置
- webpack打包vue项目demo
- vue.js项目打包上线
- HBuilder打包app(vue项目)
- Vue项目webpack打包部署到服务器
- 如何使用webpack打包vue项目?
- vue打包项目后正确显示图片
- Hbulid打包vue-cli项目生成APK
- deque
- 自定义jsp标签和El表达式
- SSM框架Spring IoC详解 No.2
- HDU 6168 Numbers(模拟)
- opencv staticLibrary
- 用Cordova打包Vue项目
- 河南省第七届大学生程序设计竞赛 问题 A: 物资调度【简单dfs】
- Python学习笔记——20170822
- C#、Web、Sql经典网址收藏
- Jenkins的Credentials(证书)管理
- SpringMVC
- 动态链接库
- 图像噪声与去噪
- About Android Emulator