cordova打包html项目的,教你用Cordova打包Vue项目

你的名字 2022-10-06 13:56 215阅读 0赞

现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。

据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的，所以比较青睐cordova，下面我就教大家怎么使用cordova打包Vue项目：

第一步：安装cordova

如果已经安装则直接跳过，否则执行以下命令：

npm install -g cordova

如果这个命令都不会运行，那我建议你不要继续往下看了。

第二步：新建cordova项目

执行命令

cordova create cordovaApp com.cordova.testapp

cd cordovaApp

cordova platform add android

到这里我们的cordova项目就创建好了。

第三步：修改vue项目

如果你没有vue项目的话，自行百度去新建一个vue项目吧。

首先修改vue项目的index.html

在head之间加入

这里注意加入这个的时候可能导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。

然后引入cordova.js

然后修改src中的main.js为以下代码

// The Vue build version to load with the \`import\` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/\* eslint-disable no-new \*/

document.addEventListener('deviceready', function() \{

new Vue(\{

el: '\#app',

router,

store,

template: '',

components: \{ App \}

\})

window.navigator.splashscreen.hide()

\}, false);

最后修改config文件夹中的index.js文件

修改build中的

assetsSubDirectory: 'static',

assetsPublicPath: '/',

为

assetsSubDirectory: '',

assetsPublicPath: '',

然后运行

npm run dev

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

第四步：将vue文件放到cordova项目中并打包

先在vue项目中运行

npm run build

执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。

然后就可以执行

cordova build android

会生成一个可执行的apk文件，安装即可。

到这里就完成了我们vue项目的打包。

友情提示：

如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node\_modules文件夹删除使用npm install安装。

如果是因为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')

\}

\},

这段代码注释即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue用Cordova打包后的app自升级功能实现

Vue项目 1.在util目录下新建upgrade.js 关键代码： import as common from '@/api/common'; /

忘是亡心i/ 2023年10月18日 10:19/ 0 赞/ 105 阅读

相关 Cordova打包教程知识体系整理（Vue项目打包成ipa）

使用工具： 1.Webstorm2017 Webstorm2017安装以及破解和汉化： [https://blog.csdn.net/BADAO\_LIUMANG

ゞ浴缸里的玫瑰/ 2023年10月18日 09:43/ 0 赞/ 132 阅读

相关 Webstorm+cordova打包vue成Android项目

一、新建vue项目 1.打开cmd命令，输入：npm i -g npm 这个命令类似用npm自身来install自己，即升级npm ![70][] 2.再输入:np

港控/mmm°/ 2023年10月17日 23:12/ 0 赞/ 39 阅读

相关 cordova打包html项目的,教你用Cordova打包Vue项目

现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和

你的名字/ 2022年10月06日 13:56/ 0 赞/ 216 阅读

相关 Cordova-----5、打包Cordova项目

![Center][] [Center]: /images/20220711/1c7f499bbaa5482c98a46606d3b35001.png

短命女/ 2022年07月12日 06:19/ 0 赞/ 185 阅读

相关 Cordova-----2、创建Cordova项目

![Center][] [Center]: /images/20220711/9cdf2eb2d286452ca80940d10403d204.png

痛定思痛。/ 2022年07月12日 06:18/ 0 赞/ 175 阅读

相关 cordova打包vue2（webpack）android、ios app

使用cordova打包vue2（webpack）app for android ios 1、vue项目通过vue-cli脚手架建立项目，使用webpack进

青旅半醒/ 2022年06月12日 07:46/ 0 赞/ 207 阅读

相关 cordova-ionic 打包出问题

作者：LoveEmperor-王子様问题截图： ![SouthEast][] 这是一般是你重新添加了平台：ionic cordova platform add a

谁借莪１个温暖的怀抱￠/ 2022年06月01日 03:12/ 0 赞/ 256 阅读

相关 cordova打包vue项目成webapp

今天尝试了用cordova把vue项目打包成apk,可以参考[w3c文档][w3c]，期间也是踩了不少坑，既然打包的是vue，首先要准备一个能运行的vue项目。 1.修改vu

「爱情、让人受尽委屈。」/ 2022年05月13日 23:52/ 0 赞/ 223 阅读

相关 CORDOVA 打包 IOS

CORDOVA 打包 IOS 首先准备一台mac电脑防止版本过低，提前将电脑升级到最高版本（我的是mac OS Mojave）安装Xcode 或升

矫情吗；*/ 2022年04月12日 14:10/ 0 赞/ 267 阅读