vue打包方案

vue 打包方案正确地址：http://blog.csdn.net/ABAP_Brave/article/details/77882047

Android/Ios 运行Cordova打包Vue的WebApp

标签： cordovaAndroidiosweb app

前面几篇文章我们说了

Vue-cli安装和使用

cordova的安装,更新及工程bulid问题的分析和解决

以上,我们已经有了Vue和Cordova项目,并且完成了Android/IOS在Cordova的各种环境配置

那么这篇,我们说说如何在Android/Ios设备上运行Vue开发的WebApp

1,WebApp

WebApp,我理解就是Web技术开发的App

在Cordova提供的原生外壳下运行(实际使用的WebView)

而我们之前初始化的Vue工程,这显然是一个类似NodeJs的项目(因为确实用了NodeJS来启动服务)

Vue做WebApp,只需要使用Webpack打包需要的代码(纯前端资源,js,css,html等),替换到Android/Ios 对应原生项目中的www文件即可(Cordova创建的原生浏览器壳会读取这个目录下的前端资源)

这样就实现了WebApp

2,Build-Vue代码

那么第一步就是打包Vue代码,所谓的打包在Webpack中就是Build

进入Vue项目目录,Build项目代码:

bogon:HelloVue Brave$ npm run build> hellovue@1.0.0build /Users/Brave/HelloVue> node build/build.js⠋ buildingforproduction...Startingtooptimize CSS...Processingstatic/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css...Processedstatic/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css, before:363, after:363, ratio:100%Hash: e77512b4baa079177feaVersion: webpack2.7.0Time:7397ms                                              Asset      Size  Chunks            Chunk Namesstatic/js/app.afe4e4d33853ac774166.js11.8kB0[emitted]  appstatic/js/vendor.64d2873e0d2b30a3635a.js110kB1[emitted]  vendorstatic/js/manifest.4cdd63a1de37a1832389.js1.45kB2[emitted]  manifeststatic/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css363bytes0[emitted]  appindex.html449bytes          [emitted]    Build complete.  Tip: built files are meanttobe served over an HTTP server.  Openingindex.html overfile:// won't work.

这里需要修改Vue项目中Webepack的打包配置,不然android/Ios运行出来是空白页面

原因是Vue的html没有找到css js 这些文件,需要在Vue打包代码前修改webpack-config文件

进入Vue项目的config/index.js

assetsPublicPath    显示空白页面的原因

productionSourceMap  是否输出map文件,用于调试

bulid完成后,copy dist中生成的文件,放入cordova-android/ios platform-中的www文件夹即可

3,Cordova打包App

将dist中生成的文件,放入cordova-android/ios platform-中的www文件夹

1)原生方式对项目进行打包

2)使用Cordova命令进行打包

bogon:vueApp Brave$sudocordova build