Cordova - Vue-cli4.x和Cordova 实现混合开发

demo 地址: https://github.com/iotjin/JhCordovaVueDemo

本文简单介绍如何使用Cordova和vue-cli4.x实现混合开发

1、首先要有Cordova项目与Vue项目

• Cordova - Cordova安装与项目创建
• Vue - Mac安装vue-cli4.x 并创建模板项目

2、项目打包配置

要实现在移动端运行vue代码，主要是把Vue项目的打包文件夹dist放到Cordova项目的www文件夹中

两种方式

一种是直接复制
另一种是通过配置Vue项目vue.config.js文件的outputDir，然后在Vue项目终端运行打包命令npm run build，即可把打包文件直接打包到Cordova项目的www文件中

注：

outputDir设置的路径看项目具体是什么层级结构

const path = require('path')

module.exports = {
    
    
  publicPath: './',
  assetsDir: './',
  outputDir: path.relative(__dirname,'../www')
}

3、编译运行

打包完成之后在Cordova项目终端运行编译命令cordova build ios，然后运行cordova run ios即可看到Vue项目代码实现的效果

直接在路径项目-platforms-ios打开xcode运行项目也是可以的

4、idea编译打包配置

5、vs编译打包配置