现在国内越来越多的开发者使用Vue开发混合应用,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成应用。
据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。因为我本身是做角+离子的,所以比较青睐科尔多瓦,下面我就教大家怎么使用科尔多瓦打包Vue项目:
<强>第一步:安装科尔多瓦
如果已经安装则直接跳过,否则执行以下命令:
npm安装- g科尔多瓦
之前
如果这个命令都不会运行,那我建议你不要继续往下看了。
<强>第二步:新科尔多瓦建项目
执行命令
科尔多瓦创建cordovaApp com.cordova.testapp
cd cordovaApp
科尔多瓦android平台添加
到这里我们的科尔多瓦项目就创建好了。
<强>第三步:修改vue项目
如果你没有vue项目的话,自行百度去新建一个vue项目吧。
首先修改vue项目的index . html
在头之间加入
& lt;元http-equiv=内容=癈ontent-Security-Policy default-src“自我”数据:差距:https://ssl.gstatic.com“unsafe-eval”;style-src '自我' ' unsafe-inline ';media-src *;img src“自我”数据:内容:,“在
& lt;元名称=癴ormat-detection”内容=暗缁?不”比;
& lt;元名称=癿sapplication-tap-highlight”内容=安弧北?
& lt;元name=笆哟啊蹦谌?皍ser-scalable=不,初始=1,最大范围=1,最小规模=1,宽度=设备宽度"在
这里注意加入<代码> & lt;元http-equiv=内容=癈ontent-Security-Policy default-src“自我”数据:差距:https://ssl.gstatic.com“unsafe-eval”;style-src '自我' ' unsafe-inline ';media-src *;img src“自我”数据:内容:,“在这个的时候可能导致页面样式改变,如果改变则不加,否则还是建议加上。
然后引入cordova.js
& lt; body>
& lt; div id="应用"祝辞& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/cordova.js "祝辞& lt;/script>
& lt; !——构建文件将自动注入比;
& lt;/body>
之前
然后修改src中的main.js为以下代码
//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的
Vue.config。productionTip=false/* eslint-disable没有新*/文档。addEventListener (deviceready,函数(){
新Vue ({
埃尔:“#应用”,
路由器,
商店,
模板:& lt; App/祝辞,
组件:{应用}
})
window.navigator.splashscreen.hide ()
},假);
之前
最后修改配置文件夹中的index.js文件
修改构建中的
assetsSubDirectory:“静态”,
assetsPublicPath:‘/?
为
assetsSubDirectory:”,
assetsPublicPath:”,
然后运行
npm运行dev
看看是否能够运行起来,如果正常说明到这里是没有问题的。
<强>第四步:将vue文件放到科尔多瓦项目中并打包
先在vue项目中运行
npm运行构建
执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的科尔多瓦项目的www文件夹下替换它原有的文件。
然后就可以执行
科尔多瓦构建android
会生成一个可执行的apk文件,安装即可。
到这里就完成了我们vue项目的打包。
<强>友情提示:
如果vue项目在运行npm开发或运行者npm运行构建的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm安装安装。
如果是因为eslint导致代码检查不通过的话,可以将Vue项目的构建文件夹下的webpack.base.config文件中
的规则
{
测试:/\。(js | vue)/美元,
装载机:“eslint-loader”,
执行:‘前’,
包括:[解决(src),解决(“测试”),
选择:{
格式化程序:需要(“eslint-friendly-formatter”)
}
},
