前面几篇文章我们说了
以上,我们已经有了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.0 build /Users/Brave/HelloVue
> node build/build.js
⠋ building for production...
Starting to optimize CSS...
Processing static/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css...
Processed static/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css, before: 363, after: 363, ratio: 100%
Hash: e77512b4baa079177fea
Version: webpack 2.7.0
Time: 7397ms
Asset Size Chunks Chunk Names
static/js/app.afe4e4d33853ac774166.js 11.8 kB 0 [emitted] app
static/js/vendor.64d2873e0d2b30a3635a.js 110 kB 1 [emitted] vendor
static/js/manifest.4cdd63a1de37a1832389.js 1.45 kB 2 [emitted] manifest
static/css/app.3e94ad4a0779d803f7d42e52c3d57b6f.css 363 bytes 0 [emitted] app
index.html 449 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// 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$ sudo cordova build
这部分就不做赘述了
【转】https://blog.csdn.net/ABAP_Brave/article/details/77882047