Vue Cordova混合app开发打包教程

ionic3是一款非常优秀的混合app开发框架,但是公司以前的项目是Vue写的,有没有一种方法可以把vue开发的项目直接可以打包成app,并且可以让vue调用原生的功能呢?  有的


cordova介绍: 可以把html css js写的代码打包成app,还可以让js调用原生的api

cordova+的开发模式ionic3(推荐)、cordova+vue、cordova+react 、cordova+angular


vue+cordova视频教程地址:https://www.itying.com/goods-937.html



下面我们看看 Cordova把Vue打包成混合app的步骤:



1、需要把Vue打包成浏览器能解析的代码


正式发布vue的项目:(把vue项目打包成浏览器能解析的代码,运行以下命令)


       npm run build   (把vue打包成浏览器能解析的代码)




2、把vue项目用cordova打包成app:


1.  在vue项目中运行  npm run build        (注意:图片 目录的路径 继续往下看)


2、把vue打包后的静态资源复制到cordova项目的www目录里面


3、运行 cordova prepare


4、执行打包操作



按照正常情况上面的vue用cordova打包后是可以运行的,但是注意:


一、如果是       vue init webpack-simple  项目名称      创建的项目:


1、运行npm run build之前需要修改:webpack.config.js里面  publicPath


把publicPath: '/dist/'    改为  publicPath: 'dist/' 



2、修改index里面引入dist的路径  去掉前面的  / (重要)



二、如果是   vue init webpack  项目名称 创建的项目:


运行npm run build之前需要修改:config/index.js 文件 把 assetsPublicPath: '/',   修改成   assetsPublicPath: './',