教你用Cordova打包Vue项目的方法
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。
据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目:
第一步:安装cordova
如果已经安装则直接跳过,否则执行以下命令:
npminstall-gcordova
如果这个命令都不会运行,那我建议你不要继续往下看了。
第二步:新建cordova项目
执行命令
cordovacreatecordovaAppcom.cordova.testapp cdcordovaApp cordovaplatformaddandroid
到这里我们的cordova项目就创建好了。
第三步:修改vue项目
如果你没有vue项目的话,自行百度去新建一个vue项目吧。
首先修改vue项目的index.html
在head之间加入
这里注意加入
然后引入cordova.js
然后修改src中的main.js为以下代码
//TheVuebuildversiontoloadwiththe`import`command //(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias. importVuefrom'vue' importAppfrom'./App' importrouterfrom'./router' Vue.config.productionTip=false /*eslint-disableno-new*/ document.addEventListener('deviceready',function(){ newVue({ el:'#app', router, store, template:'', components:{App} }) window.navigator.splashscreen.hide() },false);
最后修改config文件夹中的index.js文件
修改build中的
assetsSubDirectory:'static', assetsPublicPath:'/',
为
assetsSubDirectory:'', assetsPublicPath:'',
然后运行
npmrundev
看看是否能够运行起来,如果正常说明到这里是没有问题的。
第四步:将vue文件放到cordova项目中并打包
先在vue项目中运行
npmrunbuild
执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。
然后就可以执行
cordovabuildandroid
会生成一个可执行的apk文件,安装即可。
到这里就完成了我们vue项目的打包。
友情提示:
如果vue项目在运行npmrundev或者npmrunbuild的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npminstall安装。
如果是因为eslint导致代码检查不通过的话,可以将Vue项目的build文件夹下的webpack.base.config文件中的rules
{ test:/\.(js|vue)$/, loader:'eslint-loader', enforce:'pre', include:[resolve('src'),resolve('test')], options:{ formatter:require('eslint-friendly-formatter') } },
这段代码注释即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。