使用Hbuilderx将vue项目打包成App

最新推荐文章于 2023-12-19 16:43:06 发布
最新推荐文章于 2023-12-19 16:43:06 发布
阅读量422 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： app Hbuilderx 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48398799/article/details/117123913

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.其它配置项可选配，不配置的话就可直接打包发布啦！

Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 7838
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6789
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
使用hbuilderx将vue项目打包成App
啊哈前端的专栏
06-02 7312
一、打包vue web项目 1、修改build的配置 在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build） 打包后的静态资源文件之后会用到。 ...
vue项目Hbuilderx打包
cxy_pan0913的博客
03-28 1953
vue项目在日常开发运行ing的时候 我们使用的是内置的微型开发服务器devServer 但是我们的项目今后是要到公网服务器上面进行运行的 所以那个微型开发服务器就不足以支撑我们今后的项目运行了 那么我们就需要把项目放到更厉害的服务器上面 在这个时候 我们所写的vue项目文件是.vue结尾的 浏览器不认识 所以我们需要把当前项目进行打包 打包成浏览器可以直接认识的文件 然后再用这个更厉害的服务器运行 流程： 1.基础命令：npm run build build之后运行打包的dist文件夹下的index
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1742
HBuilderX 打包 vue 项目生成 apk
利用HBuilderX将vue项目打包成app
Lval的博客
11-01 1635
准备开发工具 开发工具：HBuilderX 官网地址 （标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版） 新建项目 选择新建–>项目–>5+App–>点击创建 创建完成后你的图标会变成下面这种：5+的图标 创建完成后会出现这些文件和文件夹 其中css，img和js文件都是可以修改的 unpackage文件是存放APP图标的，...
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
没做过产品的后端不是个好前端
11-11 427
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题： 因为打包后路径发生变化，导致..
HbuilderX 打包 Vue 项目为 App
WinkEmoji的博客
01-27 524
HbuilderX 打包 Vue 项目为 App 一. 前提准备 1.Vue CLI 我的当前版本(4.1.2) 2.HbuilderX 二. Vue 项目打包 1.在项目根目录新建 vue.config.js, 并修改文件 添加 publicPath:’./’,如下， 这样所有的资源都会被链接为相对路径，这样打包出来的包可以部署在任意路径。 ???? module.exports = { ...
使用Hbuilder X将Vue项目打包成app（Android）
weixin_44090040的博客
10-13 1446
使用Hbuilder X将Vue项目打包成app（Android） HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。 优点：速度快，所需要的环境少，加快了开发者速度，不会因为各种JDK，java，Android环境而无法打包生成apk或ipa头疼，大大减少了开发繁琐操作。 文章目录使用Hbuilder X将Vue项目打包成app（Android）一、使用步骤1.下载Hbuilder X2. 创建移动APP项目3
初试vue-cli使用HBuilderx打包app的坑
10-16
主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目+hbuilder打包实现微信支付
09-30
vue项目+hbuilder打包实现微信支付
vue项目+hbuilder打包实现app自动检测更新并下载(需要可以私聊我)
09-30
vue项目+hbuilder打包实现app自动检测更新并下载vue项目+hbuilder打包实现app自动检测更新并下载
使用HBuilder打包vue客户端app
热门推荐
ytangdigl的博客
01-05 1万+
1、使用npm run build 命令 将vue项目打包,生成打包文件dist。 2、使用HBuilder打开dist文件目录 3、在HBuilder中右键项目目录名，点转换成移动App,会生成manifest.json文件 4、在线打包移动App 右键项目名，点发行—>云打包-打原生安装包 弹出App去端打包窗口，勾选Android,然后点“参数配置” 在参
如何用HBuilderX将Vue项目打包成APP到手机使用
这里是前端，是不一样的前端
09-16 2654
如果出现vue打包后出现空白请参考这篇博客：https://blog.csdn.net/weixin_48193717/article/details/108401616 一、把写好的vue项目进行打包生成dist 二、打开HBuilderX新建项目选择5+APP（A） 把dist的文件夹复制到HBuilderX创建的5+App中 配置图片 配置启动页面 SDK配置 模块权限配置 配置沉寂模式 沉浸式是APP界面图片延伸到状态栏， 应用本身沉浸于状态栏，所以如果第三方的软件没有为状态栏分
vue项目 - 利用HBuilderX打包成APP
weixin_55042716的博客
06-15 653
1.使用 HBuilderX 新创建项目 类型点选 为 5+App 2.设置文件 将新创建项目 自动生成的文件删除 仅保留manifest.json 文件。 然后将自己的文件移入 3，设置 manifest.json 文件。 4.点击发行 5.设置 点选安卓或者iOS (ios设置需要证书，这里点选的是安卓) 安卓设置 6.开始进行打包 返回下载地址就代表成功了 点击下载地址发送到手机上即可安装 参考;https://blog.csdn.net/blue_698/article/details/
用HBuilderX 打包 vue 项目 为 App 的步骤
bear_79的专栏
12-31 1419
首先打包你的vue项目生成dist文件夹，教程请移步https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程，请确保你是将： 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的dist文件。 开始使用HBuid...
HBuilderX打包H5、vue项目
最新发布
bestyinjun的专栏
12-19 2166
HBuilderX打包H5、vue项目
Vue项目用HBuilder打包成Android App：步骤详解及问题解决
在本文档中，作者详细介绍了如何使用Vue全家桶技术构建移动端应用并将其打包成Android应用程序的过程。首先，对于基于vue-cli 3.x及以后版本的项目，需要在项目根目录下创建一个`vue.config.js`文件，用于配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值