vue项目打包成安卓app步骤（Hbuilder打包）

最新推荐文章于 2024-07-20 12:39:42 发布
最新推荐文章于 2024-07-20 12:39:42 发布
阅读量2.5k 收藏 10
点赞数
分类专栏： Vue vue专栏 文章标签： vue 打包app Hbuilder 真机运行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221334/article/details/96441075
版权
本文详细介绍了如何将Vue项目通过Hbuilder打包为安卓应用：首先确保项目正常，使用npm run build打包，生成的代码位于dist文件夹。接着在Hbuilder中打开dist文件夹并转换为移动App，格式化index.html并修正路径，最后通过真机运行进行测试。
摘要由CSDN通过智能技术生成

1.首先保证vue项目正常的，再用自带的打包程序  运行npm run build

打包完成后代码在根目录dist 文件夹内，

 

2.然后在Hbuilder中打开这个dist文件夹，这时，这个项目是web应用的项目

需要把它转成app应用的项目，鼠标右键 转换成移动app，dist的图标会由 W 变成 A

3.打开dist目录下的index.html，格式化一下代码

在每个有路径的地方加上 .  （这个很重要，不加上这个点，打包出

最低0.47元/天 解锁文章
就像风1样
关注
专栏目录
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6804
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
vue打包android
qzh88888888的博客
10-19 842
命令执行完后，如果成功，在android-app\platforms\android\app\build\outputs\apk\debug目录下会生成app-debug.apk安装文件。Android版本的安装，我这里选择8.0，因为我接下来安装的cordova也是8.0,笔者在安装其他版本踩过大坑，我建议刚学习的伙伴尽量按照我的方式走，可以避坑。今天配置vue android打包环境足足花了我6个小时，终于弄好了，在此记录一下，期间的曲折整过的伙伴们应该知道，如果用二个字形容：“崩溃”
vue项目如何打包以及如何变成android、ios应用程序
热门推荐
田兴的博客
10-25 1万+
前言 前段时间写过一篇使用Hbuilder打包前端网站为WebApp(Android,ios应用) 收到很多前段小伙伴私信，vue开发的项目如何打包成android、ios应用,那么今天就带大家走一遍vue开发的项目如何打包，然后如何发布成android、ios安装程序。安装在自己的手机上呢？ vue-cli4搭建的项目如何打包 基于vue开发的应用，现在主流的是使用vue/cli的4.x版本搭建的项目，从vue-cli的3.x版本以后，如何修改vue的项目配置呢？ 1. 创建vue.config.j
vue项目 打包成apk(android)
最新发布
weixin_56831647的博客
07-20 564
将vue项目打包成apk
Vue项目打包成安卓APP
weixin_42864629的博客
04-03 3627
概述：普通vue项目如何成安卓apk安装包 第一步：项目目录 config文件夹–>index.js里面的两处assetsPublicPath，把 ‘/’ 改为 ‘./’ 第二步：通过npm run build 指令打包vue项目到dist文件夹里面 第三步：通过HBuilderX工具5+App的默认模板项目 第四步：把除了manifest.json以外的所有东西删除 第五步：把vue打...
传统Vue项目打包成Android app
qq_40604099的博客
03-13 846
一 在项目根目录下创建js文件：vue.config.js内容如下： vue.config.js module.exports = { publicPath: './' } 二 检查router路由配置文件mode设置为hash，如果你设置的是history打包后app会出现白屏的情况 三 下载HBuilder，创建一个空的5+app项目 四 在在vue项目内运行npm run build打包vue项目 这是打包后的vue项目 这是5+app的目录 把打包后的vue项目复制到5+app项目
HBuilder Vue项目打包Android App
liwan09的博客
07-03 1406
一、Vue项目打包 vue项目打包前，需要修改两处代码，此两处代码修的原因是为了防止app启动时出现空白页面 1、将config/index.js 中的 build 配置中 assetsPublicPath 的值/ 修改为./ 2、由于hbuilder的默认格式，路由不能使用history模式，将src/router/index.js route history模式配置代码注释掉 Vue打包后的文件架构 二、HBuilder 将vue项目打包成Android app 准备工作 ...
vue项目用HBuilder打包APP.docx
09-09
在本文中，我们将深入探讨如何使用Vue.js项目和HBuilder X进行APP打包，以及如何解决安卓手机上的特定问题，如两次退出的处理。Vue.js是一种流行的前端框架，它提供了丰富的功能和组件，使得构建移动端应用变得简单...
vue项目打包成安卓app
fangyes888的博客
11-13 728
创建cordova项目 cordova create folkmusic com.music.folkmusic musicapp 将新增项目中的www替换成vue打包出来的build文件 例如：cordova create tran com.cn.px.tran tranapp cordova create tran com.cn.px.tran tranapp folkmusic是项目名称，com.music.folkmusic是包名，musicapp是程序的标题 新增项目 cordova platfo
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后  （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports = {   publicPath: “./”,    //   打包 配置这个可以先本地查看下 效果   productionSourceMap: false     //  调试文件的功能关闭 能加快打包 }; 运行命令行   npm run build 项目文件夹下生成一个 dist文件夹 下面有这些文件  然后打开index.html 本地
vue项目+hbuilder打包实现app自动检测更新并下载(需要可以私聊我)
09-30
vue项目+hbuilder打包实现app自动检测更新并下载vue项目+hbuilder打包实现app自动检测更新并下载
前端VUE项目打包成安卓APP
QY'UniverseSpace的博客
02-23 2352
1.打包vue项目，在项目的根目录执行命令 npm run build,直至项目打包完成 打开dist文件件，里面有一个index.html和static文件夹。 2.新建cordova项目 2.1安装cordova，命令行执行 npm install -g cordova 2.2利用cordova创建一个新项目，命令行执行cordova create folkmusic com.music.folkmusic musicapp folkmusic是项目名称，com.music.folk.
2024年前端最新vue项目如何打包以及如何变成android、ios应用程序，前端简历项目经验
2401_84433570的博客
05-07 1587
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue打包安卓
qq_43505774的博客
06-17 1146
第一步新建vue项目 注意dist文件 里面 通常打包之后 有static 或者没有 这个是在配置里面的 然后 关键的位置来了 打包安卓使用 Hbuilder 的路径需要注意 vue项目里面打包出来 需要服务器运行 所以 一直给了一个url 路由 /a/b/c 类似这样的 我们需要去项目里面去 修改 比如最新的脚手架 提供了 vue.config.js文件 把打包publicpath 改为 ./ 可以去 打包之后 的 html文件里面 修改 如下 两种方式都是可以的 然后我们需要通过使用Hbuil
Vue项目如何打包成app
weixin_42601608的博客
01-04 901
要打包 Vue 项目成 app，你可以使用一些工具，如 Cordova、Electron 或者 NativeScript。 使用 Cordova 打包： 安装 Cordova：npm install -g cordova 创建 Cordova 项目：cordova create my-app 进入项目目录：cd my-app 添加平台，如 Android：cordova platform add...
使用cordova将vue代码打包成Android apk
Leifeng27的博客
04-23 383
1.安装cordova 安装cordova命令行工具，通过下面这些步骤: 下载和安装Node.js。安装完成后你可以在命令行中使用node 和 npm 。 (可选)下载和安装git client, 如果你没有。安装成功后，你可以在命令行中使用git。 这个命令行使用下载git仓库中的资源。 安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载。 在Windows终端上输入npm install -g cordova -g标志是告诉 npm 我们全局安装 cord
Vue项目用HBuilder打包成Android App：步骤详解及问题解决
本文档提供了一个从Vue开发到打包成安卓APP的完整流程，适合那些希望将前端技术应用于移动应用开发的开发者参考。通过这些步骤，开发者可以将他们的Vue项目无缝地转化为可以在手机上运行的可安装应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值