使用科尔多瓦怎么对Vue项目进行打包

　　介绍

这篇文章将为大家详细讲解有关使用科尔多瓦怎么对Vue项目进行打包,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强>第一步:安装科尔多瓦,创建好科尔多瓦项目。

<强>第二步:修改Vue项目

首先修改Vue项目的index . html,引入科尔多瓦。js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果

& lt; body> 　　,& lt; div  id=癮pp"祝辞& lt;/div> 　　,& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" cordova.js "> 　　 　　

然后修改src中主要的。js为以下代码

//,, Vue  build  version 用load  with ,“进口”,命令//,(独立)runtime-only ,或是,has  been  set 拷贝webpack.base.conf  with  an 别名。 　　import  Vue 得到& # 39;vue # 39; 　　import  App 得到& # 39;。/应用# 39; 　　import  router 得到& # 39;。/路由器# 39; 　　Vue.config.productionTip =false 　　document.addEventListener (& # 39; deviceready& # 39;,,()函数,{ 　　,Vue ({new  　　el才能:& # 39;#应用# 39; 　　路由器,才能 　　商店,才能 　　,,模板:& # 39;& lt; App/祝辞& # 39; 　　,,组件:{},App  　　,}) 　　,window.navigator.splashscreen.hide () 　　},,假);

最后修改配置文件夹中的指数。js文件,修改构建中的

assetsSubDirectory:, & # 39;静态# 39; 　　assetsPublicPath: & # 39;/& # 39;

为

assetsSubDirectory:, & # 39; & # 39; 　　assetsPublicPath: & # 39; & # 39;

<强>第三步:运行

看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,
因为在浏览器环境下是找不到科尔多瓦。js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。

<强>第四步:将vue打包好的文件放到科尔多瓦项目中并打科尔多瓦包运行android,会生成一个可执行的apk文件,也可以直接在真机上运行。安装即可。

友情提示:

如果vue项目在运行npm开发或运行者npm运行构建的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm安装安装。

如果是因为eslint导致代码检查不通过的话,可以将vue项目的构建文件夹下的webpack.base。配置文件中规则的

,, { 　　,,,测试:/\。(js | vue)/美元, 　　,,,装载机:& # 39;eslint-loader& # 39; 　　,才能执行:& # 39;前# 39; 　　,,,包括:[解决(& # 39;src # 39;),,解决(& # 39;测试# 39;)), 　　,,,选择:{ 　　,,,格式化程序:需要(& # 39;eslint-friendly-formatter& # 39;) 　　,,} 　　,,},

这段代码注释即可。

<>强PS:通过科尔多瓦将vue项目打包成应用

一、创建一个科尔多瓦工程

cordova  create  cordovaVue 　　 　　cd  cordovaVue <李>

配置。xml -包含应用相关信息,使用到的插件以及面向的平台

<李>

平台-包含应用运行平台如Android和iOS上对应的科尔多瓦库

<李>

插件-包含应用所需插件科尔多瓦的库,使得应用能够访问例如照相机和电池状态相关的事项。

<李>

www -包含应用源代码,例如HTML、JavaScript和CSS文件

<李>

钩子——包含为个性化应用编译系统所需的脚本,

二、添加安卓平台

cordova  platform  add  android ——保存

三,在vue项目中生成编译完成的源文件

npm  run 构建

四,将科尔多瓦项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容,

五,在科尔多瓦项目中创建Android应用

cordova  build  Android

六,将手机连接在电脑上,运行该Android程序

cordova  run  Android

关于使用科尔多瓦怎么对vue项目进行打包就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

使用科尔多瓦怎么对Vue项目进行打包