前面几篇文章我们说了

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.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

这部分就不做赘述了

---

4,在模拟中运行WebApp

Android:

IOS: