Vue项目打包成移动App以及在手机上运行

最新推荐文章于 2022-01-25 11:52:43 发布
最新推荐文章于 2022-01-25 11:52:43 发布
阅读量2.7k 收藏 11
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44068394/article/details/104894407
版权

使用工具HBuilder 或者是HBuilder X

  1. 将完成的Vue项目打包 (build)后的dist文件放入编译器,在HBuilder中直接右键选择转换为移动App即可，在HBuilder X中要先新建一个5+App项目

在这里插入图片描述

在新建的test项目中，除了App配置文件manifest.json，其他文件可以全都删除掉。然后，将之前打包好的vue项目中的dist文件夹中的所有文件复制到test项目中
进入manifest.json文件可以配置移动app安装包（apk / ipa）

  1. USB连接手机，需要打开开发者选项，打开以下USB功能
    在这里插入图片描述
  2. 手机连上后可以配置manifest.json文件

HBuilder 和 HBuilder X配置界面可能会有差异，功能相同

在这里插入图片描述

  1. 运行index.html文件，选择你自己的手机即可真机测试配置
    在这里插入图片描述

所有的知识都是学习以及总结

lanzhengdanrui
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue项目如何打包以及如何变成android、ios应用程序
F1520080的博客
03-29 2456
点击这里即可获取，包括答案解析。赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。**[外链图片转存中…(img-NDZASUP0-1711651869600)]
vue项目怎么从头运行
mushroomLNL的博客
03-06 902
vue项目开启之后: index.html -->main.js --> App.vue -->index.js(router中的) index.js 这里面的< div id=“app”> </ div>会被App.vue完全取代 main.js main.js 是vue项目的入口文件 , 它的作用是引入App.vue 文件 ,并且将其挂载到 index.html 中作为根组件 , 并且 mian.js 中还会创建 vm 实例 import Vue from '
如何运行vue项目（维护他人的项目）
祈澈菇凉
08-02 6309
假如你是个小白，在公司接手他人的项目，这个时候，该怎么将这个项目跑通？ 前提： 首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：在维护项目之前，需要把所有的环境搭建好，这里我就不多说了，看这篇就够了：十分钟上手-搭建vue开发环境（新手教程）https://www.jianshu.com/p/0c6678671...
jquery项目实战_Vue实战—项目搭建四步曲（0）
weixin_39571938的博客
11-25 142
开篇：想通过输出Vue系列文章，让大家全面理解Vue的实现原理，掌握实用技巧，能在实战中使用Vue，解锁一个开发技能。内容大纲在文末。现在开始内容：1.为什么用Vue？​ 官网：易用、灵活、高效​ 翻译成人话：省时省力=>省钱2.解决了什么问题？​ 以前用JQuery，业务逻辑和UI更改混在一起，业务复杂的时候，手动管理UI状态非常繁琐，尤其手机端的单页面程序，Vue只关注数据。​ 举个例子...
vue项目中，main.js,App.vue,index.html如何调用
热门推荐
每天多一点干货
10-31 1万+
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
Vue CLI或Vue项目利用HBuilder打包成移动端App的操作流程涵盖了多个关键步骤，这些步骤对于将Web应用程序转换为可在移动设备上运行的应用程序至关重要。以下是详细的知识点解释： 1. **测试项目**： 在开始打包...
vue项目用HBuilder打包APP.docx
09-09
在本文中，我们将深入探讨如何使用Vue.js项目和HBuilder X进行APP打包，以及如何解决安卓手机上的特定问题，如两次退出的处理。Vue.js是一种流行的前端框架，它提供了丰富的功能和组件，使得构建移动端应用变得简单...
vue项目打包之后背景样式丢失的解决方案
10-17
在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
10-17
HBulider基于Apache Cordova，是一个使用Vue.js进行移动应用开发的工具，它可以将Vue WebApp项目打包成iOS和Android平台的原生应用。 在使用HBulider打包Vue WebApp为原生APP的过程中，通常需要以下步骤和注意的...
vue运行机制
02-21
这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我 们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常 的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程，当把整本 小册认真读完以后，再来阅读这一节，相信会有收获的。
webstorm+vue初始化项目的方法
12-12
vue新项目准备： 1、安装nodejs，官网下载傻瓜安装 node -v 验证 2、npm包管理器，是集成在node中的，所以安装了node也就有了npm npm -v 验证 3、安装cnpm npm install -g cnpm –registry=http://registry.npm.taobao.org （完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。） 4、安装vue-cli脚手架构建工具 npm install -g vue-cli vue新项目构建： 1、初始化项目模板： vue init webpack-simp
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
11-19
通过上述步骤，我们可以顺利地将Vue项目打包成可以在Android和iOS设备上运行的应用程序。虽然在这一过程中可能会遇到一些挑战和问题，但通过适当的配置和调整，大多数问题都可以得到解决。希望本文能帮助到正在或...
2048Vue写的2048小游戏可打包成app
06-11
4. **移动APP**：这表示该2048游戏项目不仅可以作为Web应用运行，还可以通过打包工具如Cordova或Capacitor转换为原生移动应用，能在iOS和Android平台上运行。 5. **vue游戏**：这是对Vue.js用于游戏开发的强调，表明...
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
12-12
使用 Hbuilder新建好移动app项目后，mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目...
Vue调用手机权限
YourNikee的博客
01-25 2621
自学vue打包成app的时候，发现了一个问题，普通ui框架无法调用手机硬件的权限，所以我找了一下，发现Dcloud有一个5+specification可以间接实现这个功能，所以我就研究了一下用法。 这个比较简单，只是想让其他小伙伴少绕一点弯路。 由于本人没学原生和nt，所以不太清楚权限是不是全的。 下面说一下用法。 其实很简单，就只是找到项目目录下的单原页面：index.html 然后使用document.addEventListener触发plusready方法，将需要使用的权限通过定义全局变量的方式定义
启动vue app的方法
不想成为网红的程序员不是好司机
08-05 3238
启动vue app的方法 用vue-cli新建项目后，停止项目，再启动。使用如下命令: npm install npm run build && npm run serve
VueCli3.0如何运行一个单文件组件App.vue
coucouxie的博客
08-24 1302
VueCli3.0如何运行一个单文件组件App.vue 首先需要全局安装vue脚手架，全局安装【需要管理员运行】 @vue/cli-service-global npm install -g @vue/cli-service-global 创建一个vue文件App.vue 运行vue单文件 vue serve App.vue ...
vue打包为App手摸手教你
技术前端，忠于热爱 @0.活在风浪里
11-27 4461
一、修改请求静态资源的路径 打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assets
vue项目打包成移动端app
最新发布
05-26
要将Vue项目打包成移动端app，你可以使用一些工具，比如： 1. Apache Cordova：Cordova是一个开源框架，可以将Web应用程序打包为本机应用程序，并且适用于多个平台，包括iOS和Android。你可以使用Cordova将Vue项目打包成本地应用程序。 2. Ionic Framework：Ionic是一个基于Angular的移动应用程序开发框架，它使用HTML、CSS和JavaScript构建应用程序，并且可以使用Cordova将其打包成本地应用程序。你可以使用Ionic Framework将Vue项目打包成移动应用程序。 3. Framework7：Framework7是一个基于HTML、CSS和JavaScript的移动应用程序开发框架，它专注于iOS和Android的外观和感觉，并且可以使用Cordova将其打包成本地应用程序。你可以使用Framework7将Vue项目打包成移动应用程序。 以上这些工具都可以将Vue项目打包成移动应用程序，你可以根据自己的需求选择最适合你的工具。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值