Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

最新推荐文章于 2024-07-29 17:18:39 发布
最新推荐文章于 2024-07-29 17:18:39 发布
阅读量1k 收藏 1
点赞数
分类专栏： Vue
原文链接：https://www.hangge.com/blog/cache/detail_2101.html
版权

转自：https://www.hangge.com/blog/cache/detail_2101.html

  现在有越来越多的开发者使用 Vue.js 进行移动应用的开发，而如何将一个 Vue 项目打包成手机可用的 App 有很多方法。下面介绍如何使用 cordova 来打包 Vue 项目（这里以 Android 应用为例）。

 

一、准备工作

1，环境搭建

首先我们要搭建好 Cordova 环境、Android 环境，具体可以参考我之前写的这篇文章：

 

2，创建项目

新建一个 Cordova 项目（用于打包 Vue 项目），并添加 Android 平台文件。具体操作同样可以参考上面文章。

原文:Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

 

3，项目运行测试

（1）手机先装好设备驱动（这个很重要）

（2）将手机接上电脑，并设置为调试模式。

1

设置/设定 -> 开发者选项 -> USB 调试。将其打勾，允许 USB 线调试。

（3）运行命令：cordova run android -list 显示当前连接的 android 设备。 

原文:Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

 

（4）运行命令：cordova run android -target="32309910caf57f11"　即可自动将工程编译安装到设备上，并启动真机进行调试。（target 里便是上面查到的设备编码）

    如果你电脑只接了一台设备那么直接运行：cordova run android 就好了。

原文:Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

 

二、修改 Vue 项目

1，修改 config/index.js

将 build 属性节点下的 assetsPublicPath 该成 '' （注意是 build 下 的 assetsPublicPath，不要改 dev 下的了）

1

2

3

4

5

6

7

8

build: {

  // Template for index.html

  index: path.resolve(__dirname, '../dist/index.html'),

 

  // Paths

  assetsRoot: path.resolve(__dirname, '../dist'),

  assetsSubDirectory: 'static',

  assetsPublicPath: '',  //原来是 '/'

 

2，修改 index.html

这里我们手动将 cordova.js 添加进来。

1

2

3

4

5

6

7

8

9

10

11

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>hangge.com</title>

</head>

<body>

    <div id="app"></div>

    <script type=text/javascript src=cordova.js></script>

</body>

</html>

 

3，修改 src/main.js

将 new Vue() 代码放到 deviceready 回调里面。（在使用 pc 开发调试时可以先把外层的这个监听给注释掉，等到要打包成 app 时再放开。）

1

2

3

4

5

6

7

8

9

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

  new Vue({

      el: '#app',

      store,

      router,

      components: { App },

      template: '<App/>'

  })

}, false);

 

三、打包 Vue 项目

（1）首先在 Vue 项目文件夹下运行如下命令进行编译：

1

npm run build


（2）执行完成后会生成一个 dist 文件夹，我们将该文件夹里的所有文件复制到 cordova 项目的 www 文件夹下替换掉原有的文件。

原文:Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

 

（3）进入 Cordova 项目文件夹，执行如下命令就可以生成 App 并自动在手机上安装运行了。

1

cordova run android

 

附：让 Vue 项目直接编译到 Cordova 项目下

    按照上面的操作，每次打包新版本，我们都需在 Vue 项目编译后手动将 dist 文件夹下的内容复制到 cordova 项目的 www 文件夹下。其实我们可以通过修改编译的发布路径，从而省去手动复制这个操作。

 

（1）假设我们的 Vue 项目和 Cordova 项目位置是平级的。

原文:Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

 

（2）修改 config/index.js 文件中 build 属性节点下的 index、assetsRoot 属性，将它们改成 Cordova 项目下的 www 文件夹（注意是 build 下 的 index、assetsRoot 属性，不要改成 dev 下的了）

1

2

3

4

5

6

build: {

  //将文件直接编译到 cordova 项目下面

  index: path.resolve(__dirname, '../../cordova_project/www/index.html'),

  assetsRoot: path.resolve(__dirname, '../../cordova_project/www'),

  assetsSubDirectory: 'static',

  assetsPublicPath: '',  //原来是 '/'


（3）这样以后每次我们执行 npm run build 命令都回自动加文件编译到 Cordova 项目文件夹下。

狂奔之林
关注
专栏目录
使用cordova将Vue项目打包成app完整详细流程
m0_46694056的博客
11-08 4022
环境搭建与配置 一、下载jdk并配置 下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 往下滑，找到你自己电脑合适的系统，我的是64位的，如下 下好之后注意自己的安装目录就行，正常操作即可完成安装。 *配置jdk 1.打开环境变量，点击新建 然后输入JAVA_HOME和你刚才安装的jdk的安装目录，随后点击确定。 2.双击path之后，新建两个环境变量：%JAVA_HOME%\jre\bin
vue-cli-plugin-cordova:Vue Cli 3 Cordova插件
04-22
将Cordova集成到Vue Cli App中 如何 创建Vue应用 $ npm install -g @vue/cli $ vue create my-app $ cd my-app $ npm install -g cordova # If cordova is not already installed 将插件添加到您的vue应用。 $ ...
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 694
想要更好的阅读体验，可以转我的个人博客。 Cordova 安装 使用 npm 安装 cordova 命令行: npm install -g cordova 创建 Vue 项目: vue create cordova-test 找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。 vue add vue-cli-plugin-cordova-simple 新建 vue.config.js 文
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Cordova从0到1开始打包APP
最新发布
一个努力不被优化的程序员
07-29 970
降版本没有用报：Test of distribution url https://services.gradle.org/distributions/gradle-8.7-bin.zip failed. Please check the values set with --gradle-distribution-url and --gradle-version.C:\Users\my\AppData\Local\Android\Sdk\gradle-8.7\bin（自己下载的路径）
Cordova - Windows系统下安装配置Cordova
Welcome
06-13 1012
使用Cordova可以很方便地进行跨平台应用的开发。在之前的文章：Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）。介绍了如何在Mac OS系统下安装使用Cordova。本文介绍如何在Windows系统下搭建Cordova环境。并使用Cordova编译发布一个安卓（Android）应用。 一，Cordova环境搭建 1，...
超详细cordova环境配置（windows）及实例
weixin_34125592的博客
04-05 202
摘要： 最近闲来无事就把以前做的cordova项目整理了下，发现网上很少有详细完整的配置教程，所以自己就总结了下分享给大家。 环境搭建： 1.安装node.js下载安装node.js,https://nodejs.org/en/，安装cordova时需要使用。安装完成之后在终端（win+r,cmd）执行node -v，如果看到如下图所示的...
cordova 打包 vue项目
zhSpace的博客
11-30 2384
1、安装cordova npm install -g cordova 2、新建cordova项目 cordova create jtcsm com.xx.jtcsm eat jtcsm是项目名称 com.xx.jtcsm是包名 eat app标题 3、创建完新的cordova项目后将 vue编译完后dist文件夹下的文件复制到 www文件夹下 * 记得将原先www文件夹内的文件全部删除 4、检查环境是否准备就绪 cordova requirements 5、生成签名...
Cordova 环境搭建（Window）
邻家丶乖乖女的专栏
02-06 501
1、环境准备1)安装node.js这是因为安装cordova时要用到node.js的npm ,连接:http://nodejs.org/下载安装成功之后,打开cmd,进入D盘,创建cordova的工作空间: mkdir cordovaspace测试安装结果命令: node -v2)安装git用于后面有些插件可能需要用git来下载, 连接:http://git-scm.com/3)安装ant下载连接...
通过cordova将vue项目打包为webapp的方法
01-19
下面开始对vue.js项目进行打包，打包环境为Android。 可以看下我的github：https://github.com/padipata ，里面有我自己写的vue项目，喜欢的给个关注呗。 1.添加cordova项目 $ cordova create myApp1 org.apache....
教你用Cordova打包Vue项目的方法
08-29
在近些年来，混合开发App变得越来越流行，许多开发者选择使用Vue框架来开发混合App，但是当开发完成后，很多人不知道如何将Vue项目打包成App。目前流行的打包方法有weex和Cordova两种，今天我们将详细介绍使用...
用Cordova打包Vue项目
weixin_34367257的博客
02-01 146
现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目： 第一步：安装cordova,创建好c...
cordova打包vue项目
debugcool的博客
02-03 210
需要软件 Android SDK，我这里直接安装Android Studio的时候已经安装了。 cordova使用npm安装 npm install -g cordova jdk安装教程网上都有，就是记得配置环境变量JAVA_HOME 创建cordova项目 cordova create helloCordova 添加Android cordova platform add android --save 然后把你打包好的vue项目复制到helloCordova项目中的www目录下 然后就是build你
cordova+vue项目打包
一一
09-10 286
打debug包 在package.json中scripts下添加如下两条命令配置并直接按顺序运行，成功后至项目文件夹/platforms/android/app/build/outputs/apk/debug/app-debug.apk下查找app-debug.apk "cordova-prod":"vue-cli-servicebuild--destwww", "cordova:android": "cordova run android", 打realse包 将已有app.j...
Window 系统下安装cordova （用于Android开发）
热门推荐
yushuyou的专栏
02-26 1万+
因为前段时间开发的Android项目要用到cordova与H5进行交互，翻查了不少网站，故此写一遍博客来巩固一下。若有写不好之处请勿喷，谢谢！Android开发的程序员，JDK与ADT以及SDK的环境配置就不需要介绍了，这些环境少不了！下面来讲cordova安装的步骤： 第一步：安装Ant Ant具有自动编译打包android项目的功能。此处给出官网下载地址：http://ant.apache.
Window 系统下安装cordova （用于Android开发）
hxkjnet360的专栏
12-06 397
Android开发的程序员，JDK与ADT以及SDK的环境配置就不需要介绍了，这些环境少不了！下面来讲cordova安装的步骤：  第一步：安装Ant  Ant具有自动编译打包android项目的功能。此处给出官网下载地址：http://ant.apache.org/bindownload.cgi  下载完解压之后得要配置环境，方法如下：  　　变量： ANT_HOME 添加值： 刚解压到
使用cordova对vue项目进行打包(android)
liucai1018的博客
06-17 986
说明： 当前有一个vue项目，需要使用cordova进行打包 环境条件： 1 jdk-即Java运行环境 这个很简单，百度一下就行，学过Java的话都有安装过jdk 检查电脑是否安装了jdk：win+R->输入cmd->回车进入黑窗口，输入javac->如果出现关于javac的帮助信息则表示已安装 2安装nodejs环境 相信一般要打包vue项目肯定开始也是装了nodejs了 查看是否安装了nodejs：node -v（如果出现了版...
Vue项目整合Cordova一键打包apk
Enaium的博客
07-18 478
Cordova是一个依赖于Node.js的工具，它可以将HTML页面打包为apk等移动端应用，本篇文章将介绍如何使用Cordova将Vue项目打包为apk。
vue项目如何打包成app，详细步骤
06-07
好的，下面是基于Cordova打包Vue.js项目成为Android应用程序的详细步骤： 1. 安装Node.js和npm Cordova需要Node.js和npm，所以首先需要安装它们。 2. 安装Cordova 安装完成Node.js和npm之后，使用以下命令安装Cordova： ``` npm install -g cordova ``` 3. 创建Cordova项目 在Vue.js项目的根目录下，执行以下命令创建Cordova项目： ``` cordova create <project_name> <package_name> ``` 其中，`<project_name>`是项目名称，`<package_name>`是应用程序的包名。 4. 添加Android平台 在Cordova项目的根目录下，执行以下命令添加Android平台： ``` cordova platform add android ``` 这会下载和安装Android平台所需的所有依赖项和工具。 5. 将Vue.js项目复制到Cordova项目 将Vue.js项目中的所有文件复制到Cordova项目的`www`目录下。 6. 安装Vue.js依赖项 在Cordova项目的根目录下，执行以下命令安装Vue.js依赖项： ``` npm install vue --save ``` 7. 安装Cordova插件 为了让Vue.js应用程序能够在原生应用程序中运行，需要安装一些Cordova插件。在Cordova项目的根目录下，执行以下命令安装`cordova-plugin-whitelist`和`cordova-plugin-inappbrowser`插件： ``` cordova plugin add cordova-plugin-whitelist cordova plugin add cordova-plugin-inappbrowser ``` 8. 修改配置文件 在Cordova项目的根目录下，找到`config.xml`文件，并将以下代码添加到文件中： ``` <allow-navigation href="http://*/*" /> <allow-navigation href="https://*/*" /> ``` 这允许应用程序在Web视图中加载外部URL。 9. 构建项目 在Cordova项目的根目录下，执行以下命令构建项目： ``` cordova build android ``` 这会将Vue.js应用程序打包成为一个Android应用程序，并生成APK文件。 10. 运行应用程序 将生成的APK文件安装到Android设备上，然后运行应用程序。 以上就是基于Cordova打包Vue.js项目成为Android应用程序的详细步骤。需要注意的是，这只是其中一种打包的方式，还有其他工具和框架可以用来打包Vue.js项目成为移动应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值