vue 打包方案正确地址：http://blog.csdn.net/ABAP_Brave/article/details/77882047
Android/Ios 运行Cordova打包Vue的WebApp
前面几篇文章我们说了
以上,我们已经有了Vue和Cordova项目,并且完成了Android/IOS在Cordova的各种环境配置
那么这篇,我们说说如何在Android/Ios设备上运行Vue开发的WebApp
WebApp,我理解就是Web技术开发的App
在Cordova提供的原生外壳下运行(实际使用的WebView)
而我们之前初始化的Vue工程,这显然是一个类似NodeJs的项目(因为确实用了NodeJS来启动服务)
Vue做WebApp,只需要使用Webpack打包需要的代码(纯前端资源,js,css,html等),替换到Android/Ios 对应原生项目中的www文件即可(Cordova创建的原生浏览器壳会读取这个目录下的前端资源)
这样就实现了WebApp
那么第一步就是打包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文件夹即可
将dist中生成的文件,放入cordova-android/ios platform-中的www文件夹
1)原生方式对项目进行打包
2)使用Cordova命令进行打包
bogon:vueApp Brave$sudocordova build
