cordova打包vue-cli项目简记（mac系统）

一、cordova hello-world

1.安装

$ npm install -g cordova

2.创建cordova工程

$ cordova create hello com.example.hello HelloWorld

【说明】

hello：cordova目录名称

com.example.hello：包名

HelloWorld：项目名（在config.xml的中查看）

3.给项目添加平台（按需添加）

$ cordova platform add android

$ cordova platform add ios

$ cordova platform add browser

查看已经添加和可以添加的平台：

$ cordova platform

4.运行hello-world（例如在ios平台）

$ cordova run ios

【注】

这里可能会报错，形如：

No target specified for emulator. Deploying to iPhone-SE, 10.2 simulator

原因：

没有为模拟器选择指定的机型。（模拟器支持多种机型，如图示。直接run，不指定机型，就会报这个错）

解决方式（ios平台为例）：

手动使用xcode打开 [目录名] ——> platforms ——> ios ——> [项目名].xcodeproj

本例即：hello ——> platforms ——> ios ——> HelloWorld.xcodeproj

手动选择机型，并启动。

看到如下界面，则hello-world运行成功：

二、用cordova将vue-cli项目包装成原生应用

【原理】

将前端项目正常打包后的资源文件，全部放到cordova项目下的www文件夹中。

使用cordova启动，即可在相应平台模拟器上运行起前端代码。

【具体操作】

1.在vue-cli项目的index.html中，添加cordova引用

index.html

2.在vue-cli项目的main.js中，添加监听事件（设备加载完成，就渲染前端界面）

main.js

3.修改配置文件。在vue-cli项目中，就是修改vue.config.js

vue.config.js

【说明】

publicPath统一设置为' '（默认是' / '），outputDir指向cordova项目的www文件夹。此处假设，cordova项目hello和当前vue项目在同级目录下。

很多文章除了这两个字段，还会要求修改indexPath。indexPath，即打包后的index.html的输出路径（相对于 outputDir），默认是'index.html'。这里由于默认路径符合我们的期望，故不做修改。

4.运行打包命令，进行测试

vue项目下运行：

$ npm run build

cordova项目下运行：

$ cordova run ios

成功渲染出自己的前端界面，则包装成功。

#参考：

http://www.hangge.com/blog/cache/detail_2101.html

https://www.cnblogs.com/pengjunhao/p/6803606.html