使用hbuilderx将vue项目打包成App

最新推荐文章于 2024-07-26 14:58:14 发布
最新推荐文章于 2024-07-26 14:58:14 发布
阅读量6.9k 收藏 14
点赞数 2
分类专栏： app 文章标签： hbuildx app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhe128520/article/details/90738282
版权
本文详细介绍了如何使用HBuilderX将基于Vue的web项目打包成App。首先，修改Vue项目的build配置，然后运行yarn run build打包资源。接着，注册DCloud开发者账号，下载HBuilderX，新建H5+ App项目，并将Vue项目的静态资源导入。在manifest.json中配置图标、启动图、SDK和权限。最后，通过HBuilderX的云打包功能，生成Android App。
摘要由CSDN通过智能技术生成

一、打包vue web项目

1、修改build的配置

在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号)

2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build）

打包后的静态资源文件之后会用到。

二、使用hbuildx打包成App

1、先在dcloud注册个开发者账号：

https://dev.dcloud.net.cn/

2、下载hubilderx App开发版本（https://www.dcloud.io/hbuilderx.html），打开hbuilderx，点击左下角登录账号。新建h5+ App项目：

最低0.47元/天 解锁文章
啊哈前端
关注
专栏目录
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6793
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
使用HBuilderX实现打包vue项目成app
weixin_34321977的博客
03-25 7331
一、准备开发工具 开发工具：HBuilderX 官网地址：http://www.dcloud.io （标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版） 二、打包生成一个vue项目 就拿手头上一个vue项目进行打包，vue项目预览如下： 打包生成的项目结构： 三、创建HBuilder的app项目 （请先注册HBuilde账...
HBuilder X中配置vue-cli项目和UI库
最新发布
qq_64782704的博客
07-26 1088
我们一般在网上下载的前端项目是没有node_modules文件夹的,因为这里面包含的是项目所依赖的外部组件文件,并且该文件夹占用的空间较大,我们可以通过node.js中的命令(类似于maven中的pom.xml文件)来从远程仓库中自己下载,所以不需要别人打包发过来,这样既省空间,又节约时间,该命令是。一个项目中有很多HTML文件,一个HTML文件表示一个网页,他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱。
使用HBuilderX将vue或H5项目打包app
鹏仔工作室的秘密基地
08-23 5047
好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。
使用Hbuilderx将vue项目打包成App
weixin_48398799的博客
05-21 371
1.修改vue项目中config目录下得index.js index.js文件里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2.npm run build 打包Vue项目 3.打开Hbuilderx，新建一个h5+ App项目 4.删除vue-app项目里面的css、img、js文件夹；将vue打包之后的dist里面的文件拷贝进vue-app中直接覆盖 5.配置文件mainfest.json中生成AppID 6.其它配置项可选配，不配置的话就可
Hbuilder将vue项目打包为app（具体步骤和注意点）
...
10-04 4335
Hbuilder将vue项目打包为app（具体步骤和注意点）
HBuilder X打包vue项目成APP
呔！妖怪
09-08 542
HBuilder X打包vue项目 新建5+app项目 然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己vue项目打包好的dist文件里边的内容 配置manifest.json好相关的内容 鼠标右键 ​ 云打包之前最好是通过手机基座测试没问题后再进行云打包 ​ 关于打包后的路劲问题 ​ 去config下的index.js中 的buil...
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1593
HBuilderX 打包 vue 项目生成 apk
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6444
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
vue移动端项目打包成app
weixin_52608028的博客
02-22 196
运行命令 生成dist文件夹 npm run build 打开HBuilder 右键 新建 项目 复制dist文件夹下的文件替换新建项目里边相同文件 打开新建项目manifest.json,设置基础配置 右击项目名-> 发行 -> 原生App云打包 若出现错误提示 去掉通讯录的勾选重新打包 队列中----等待打包完成 打包成功—复制链接至手机浏览器下载 ...
vue项目（webpack+mintui），使用hbuilder打包app
weixin_30301183的博客
06-14 475
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ assetsPublicPath: './', ...
HBuilder打包app(vue项目)
热门推荐
niesiyuan000的博客
12-25 2万+
一、测试项目是否可以正确运行    指令:npm run dev首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目不必非得是像我这样的，这一步的目的只是测试一下咱们的vue项目是否可以运行二、修改路径 (assetsPublicPath: './')打开我们config中的js文件，修改assetsPublicPath的路径为"./"（下图的右下角位置）三、打包文件 ...
如何用HBuilderX将Vue项目打包成APP到手机使用
这里是前端，是不一样的前端
09-16 2387
如果出现vue打包后出现空白请参考这篇博客：https://blog.csdn.net/weixin_48193717/article/details/108401616 一、把写好的vue项目进行打包生成dist 二、打开HBuilderX新建项目选择5+APP（A） 把dist的文件夹复制到HBuilderX创建的5+App中 配置图片 配置启动页面 SDK配置 模块权限配置 配置沉寂模式 沉浸式是APP界面图片延伸到状态栏， 应用本身沉浸于状态栏，所以如果第三方的软件没有为状态栏分
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
没做过产品的后端不是个好前端
11-11 344
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题： 因为打包后路径发生变化，导致..
vue移动端项目通过HBuilderX打包成app，通过真机运行
weixin_39150852的博客
12-17 1194
通过npm run build将vue的移动端项目打包成dist文件夹 打开HBuilderX,新建5+APP项目 3.创建完成后，将css，img，js文件夹删除，unpackage文件是存放App图标的，manifest.json是打包成APP的配置文件，将dist文件夹下的内容复制到当前项目下 4.连接手机，将手机的开发者模式打开，点击运行到手机或模拟器 5.手机将自动安装HBuilder调试基座，安装完成后自动运行项目 问题： 运行后，手机出现白屏，无页面展示 原因1： 页面中引用的js和c.
将vue打包为APP重要步骤和流程
qq_44538773的博客
04-02 3432
一、大致流程 1.项目整体使用Vue+HbuilderX(或者Hbuilder)开发 2.Vue实现基本页面跳转，增删改查等app基本功能，当需要使用到app原生功能则使用mui.js 3. 最后通过HbuilderX将vue项目打包成app包 二、注意事项 1.router里的mode注解掉 const router = new VueRouter({ //mode: 'history', ...
VUE_vue跳转第三方地图导航软件定位导航
小歪博客
02-01 2429
当前项目引用了vant弹框组件 <van-action-sheet v-model="show" description="请选择已安装APP" :actions="actions" @select="onSelect" /> export default { data() { return { show:true, actions: [{id:1, name: '腾讯地图' }, {id:2, name: '百度地图' }, {id:3,.
Vue项目用HBuilder打包成Android App：步骤详解及问题解决
在本文档中，作者详细介绍了如何使用Vue全家桶技术构建移动端应用并将其打包成Android应用程序的过程。首先，对于基于vue-cli 3.x及以后版本的项目，需要在项目根目录下创建一个`vue.config.js`文件，用于配置...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

啊哈前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值