HBuilder将vue项目打包成移动端app

最新推荐文章于 2023-10-07 14:21:34 发布
最新推荐文章于 2023-10-07 14:21:34 发布
阅读量755 收藏 9
点赞数 2
分类专栏： vue 文章标签： app vue打包成APP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33843076/article/details/103279685
版权

vue项目打包成移动APP

1.首先创建一个vue项目

在这里插入图片描述

2.什么都不要管,直接npm run build 打包，打包后之后会有一个dist文件

在这里插入图片描述

3 使用HBuilder X 新建一个5+APP

在这里插入图片描述

4 除了manifest.json 其他文件全部删除

在这里插入图片描述
在这里插入图片描述

5然后把打包好的dist文件夹下文件复制到test 下

在这里插入图片描述

6 接着修改index.html

这是默认文件

在这里插入图片描述

在引入文件前面加上 ./
修改后的 每一个都要加上
在这里插入图片描述

7.云打包 点击云打包

在这里插入图片描述

使用公用测试正式 广告全部不要勾选 然后点击打包 打包后之后会返回一个下apk链接 复制链接到浏览器下载 下载后 发给自己手机上 安装就可以了

在这里插入图片描述
在这里插入图片描述

下面是效果图（公司的一个项目）
在这里插入图片描述

刚好做到这么个项目，百度找了很多 都不行 然后自己结合百度的整合，终于搞好了

醉清颜
关注
专栏目录
利用HBuilder将vue项目打包成移动端app
代码青春
10-13 2444
http://blog.csdn.net/zhoudan232/article/details/73466814
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6770
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
vue项目通过Hbuild 打包成apk文件
暮子凡的博客
07-10 410
vue项目通过Hbuild 打包成apk文件 一，修改基本配置 vue.config.js文件，注释代理配置 publicPath 改成 ‘./’ //vue.config.js module.exports = { publicPath: "./", //outputDir: "dist", // 输出文件目录 //assetsDir: "static", // 配置js、css静态资源二级目录的位置 devServer: { open: true, //设置启动项目时默认打
用HBuilderX把vue项目打包成apk
weixin_50552284的博客
10-04 6019
下载 https://www.dcloud.io/hbuilderx.html 官网安装说明 https://hx.dcloud.net.cn/Tutorial/install/windows 3.在vscode中打包vue项目 在打包vue项目之前，修改以下几处： （1）config\index.js 把build下面的assetsPublicPath的值，从’/‘改为’./’： （2）src/router/index.js mode如果是history，注释掉。 根目录直接指向想要的画面。 （3）.
hbuildx打包成apk_vue+HBuilder 打包成apk
weixin_39870700的博客
12-24 161
默认配置，直接npm run build将生成后的dist文件夹复制出来放到HBuilder相应目录下，然后HBuild下打开dist目录。强调：用的是HBuilder 不是 HBuildrX,因为我用HBuilderX打包反复闪退，实在搞不定原因啊要么转换为移动app，要么新建一个移动app然后复制manifest.json文件到disk目录。然后右键菜单 发行=》云打包-原生安装包=》接下来直...
vue项目 - 利用HBuilderX打包成APP
weixin_55042716的博客
06-15 576
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
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.其它配置项可选配，不配置的话就可
将vue项目打包成移动端app
热门推荐
关于安安的博客
04-17 4万+
记录以下自己将web app打包成移动端app的步骤及问题   事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目   1，将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './' 2，执行npm run build之后生成dist...
HBuilder 打包
最新发布
weixin_46243213的博客
10-07 1664
HBuilder 打包
vue项目利用Hbuilder打包成APP流程，以及遇到的坑
wly_er的博客
07-24 4517
目录 1.打包项目 1.1打包的app出现白屏。 1.2点击页面跳转不了，报Loadingchunk2failed. 等错误。 1.3.点手机物理按钮，直接退出程序。 2.Hbuilder发布 2.1创建项目5+App项目 2.2替换文件 2.3利用云打包发布APP 1.打包项目 期间遇到的坑，提前说下，避免重复工作。 1.1打包的app出现白屏。 出现原...
vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统环境部署（二）
淡淡的云彩恋歌
08-21 1919
前言 最近公司项目需要做一个小型的填报的录入系统，根据业务的具体分析，采用了基于vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技术栈构建录入系统，同时也作为学习vue全家桶技术栈的一个学习记录。 项目初始化 第一步：安装vue-cli，推荐全局安装，安装过程请耐心等待 npm install -g vue-cli 第二步 初...
使用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项目，状态栏问题
sywdebug的博客
08-11 1012
场景：老总让做的那个 APP，页面改来改去，最后做完了，状态栏需要沉浸背景，状态栏文字颜色也要改上集说到解决 HbuilderX 打包的 vue 项目，物理返回键问题，当时装了 mui 框架，这个也需要，安装方法可以看之前那个有写，
vue项目打包部署linux_Vue前端项目打包，并部署Vue项目到Linux云服务器上
weixin_40000999的博客
12-20 931
一. vue前端项目打包使用vscode开发项目在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。如图所示：prod.env.js在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件build: {// Template for ...
Vue中实现HBuilder X打包App与部署
New个对象喝咖啡
03-19 1468
Vue中实现HBuilder X打包App与部署 HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。 提示：以下是本篇文章正文内容 一、HBuilder X打包 HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。 二、使用步骤（图解） 1.要把Vue路由模式设置为Hash模式 否则会出现白屏
vue项目Hbuilderx打包
cxy_pan0913的博客
03-28 1819
vue项目在日常开发运行ing的时候 我们使用的是内置的微型开发服务器devServer 但是我们的项目今后是要到公网服务器上面进行运行的 所以那个微型开发服务器就不足以支撑我们今后的项目运行了 那么我们就需要把项目放到更厉害的服务器上面 在这个时候 我们所写的vue项目文件是.vue结尾的 浏览器不认识 所以我们需要把当前项目进行打包 打包成浏览器可以直接认识的文件 然后再用这个更厉害的服务器运行 流程： 1.基础命令：npm run build build之后运行打包的dist文件夹下的index
vue项目使用hbuildX打包成app
weixin_50382901的博客
03-22 1406
vue项目使用hbuildX打包成app
用HBuilderX 打包 vue 项目 为 App 的步骤
bear_79的专栏
12-31 1305
首先打包你的vue项目生成dist文件夹，教程请移步https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程，请确保你是将： 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的dist文件。 开始使用HBuid...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值