Cordova - 打包Vue项目的详细步骤(将Vue.js项目编译成App)
作者:hangge | 2018-07-03 08:10
现在有越来越多的开发者使用 Vue.js 进行移动应用的开发,而如何将一个 Vue 项目打包成手机可用的 App 有很多方法。下面介绍如何使用 cordova 来打包 Vue 项目(这里以 Android 应用为例)。
![](http://hangge.com/blog_uploads/201806/2018062311395964643.png)
(2)执行完成后会生成一个 dist 文件夹,我们将该文件夹里的所有文件复制到 cordova 项目的 www 文件夹下替换掉原有的文件。![](http://hangge.com/blog_uploads/201806/2018062312052389417.png)
![](http://hangge.com/blog_uploads/201806/201806231223504160.png)
(3)这样以后每次我们执行 npm run build 命令都回自动加文件编译到 Cordova 项目文件夹下。
一、准备工作
1,环境搭建
首先我们要搭建好 Cordova 环境、Android 环境,具体可以参考我之前写的这篇文章:
2,创建项目
新建一个 Cordova 项目(用于打包 Vue 项目),并添加 Android 平台文件。具体操作同样可以参考上面文章。
![](http://hangge.com/blog_uploads/201806/2018062311395964643.png)
3,项目运行测试
(1)手机先装好设备驱动(这个很重要)
(2)将手机接上电脑,并设置为调试模式。
设置/设定 -> 开发者选项 -> USB 调试。将其打勾,允许 USB 线调试。(3)运行命令:cordova run android -list 显示当前连接的 android 设备。
![](http://hangge.com/blog_uploads/201607/2016072016205425825.png)
(4)运行命令:cordova run android -target="32309910caf57f11" 即可自动将工程编译安装到设备上,并启动真机进行调试。(target 里便是上面查到的设备编码)
如果你电脑只接了一台设备那么直接运行:cordova run android 就好了。
![](http://hangge.com/blog_uploads/201607/2016072016410114154.png)
二、修改 Vue 项目
1,修改 config/index.js
将 build 属性节点下的 assetsPublicPath 该成 '' (注意是 build 下 的 assetsPublicPath,不要改 dev 下的了)
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '', //原来是 '/'
2,修改 index.html
这里我们手动将 cordova.js 添加进来。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>hangge.com</title> </head> <body> <div id="app"></div> <script type=text/javascript src=cordova.js></script> </body> </html>
3,修改 src/main.js
将 new Vue() 代码放到 deviceready 回调里面。(在使用 pc 开发调试时可以先把外层的这个监听给注释掉,等到要打包成 app 时再放开。)
document.addEventListener('deviceready', function() { new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' }) }, false);
三、打包 Vue 项目
(1)首先在 Vue 项目文件夹下运行如下命令进行编译:
npm run build
(2)执行完成后会生成一个 dist 文件夹,我们将该文件夹里的所有文件复制到 cordova 项目的 www 文件夹下替换掉原有的文件。
![](http://hangge.com/blog_uploads/201806/2018062312052389417.png)
(3)进入 Cordova 项目文件夹,执行如下命令就可以生成 App 并自动在手机上安装运行了。
cordova run android
附:让 Vue 项目直接编译到 Cordova 项目下
按照上面的操作,每次打包新版本,我们都需在 Vue 项目编译后手动将 dist 文件夹下的内容复制到 cordova 项目的 www 文件夹下。其实我们可以通过修改编译的发布路径,从而省去手动复制这个操作。
(1)假设我们的 Vue 项目和 Cordova 项目位置是平级的。
![](http://hangge.com/blog_uploads/201806/201806231223504160.png)
(2)修改 config/index.js 文件中 build 属性节点下的 index、assetsRoot 属性,将它们改成 Cordova 项目下的 www 文件夹(注意是 build 下 的 index、assetsRoot 属性,不要改成 dev 下的了)
build: { //将文件直接编译到 cordova 项目下面 index: path.resolve(__dirname, '../../cordova_project/www/index.html'), assetsRoot: path.resolve(__dirname, '../../cordova_project/www'), assetsSubDirectory: 'static', assetsPublicPath: '', //原来是 '/'
(3)这样以后每次我们执行 npm run build 命令都回自动加文件编译到 Cordova 项目文件夹下。
全部评论(1)
cordova打包vue项目iOS的可以上架么 公司搞了一个项目不算简单被拒了,说是太简单web
站长回复:cordova打包vue项目是可以上架的。被拒就如苹果反馈的功能简单了,这个属于软件业务功能问题,和技术无关。