vue项目Hbuilderx打包

Vue项目部署与打包指南

最新推荐文章于 2025-09-30 16:11:27 发布

原创最新推荐文章于 2025-09-30 16:11:27 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #阿里云

vue项目在日常开发运行ing的时候我们使用的是内置的微型开发服务器devServer 但是我们的项目今后是要到公网服务器上面进行运行的所以那个微型开发服务器就不足以支撑我们今后的项目运行了那么我们就需要把项目放到更厉害的服务器上面在这个时候我们所写的vue项目文件是.vue结尾的浏览器不认识所以我们需要把当前项目进行打包打包成浏览器可以直接认识的文件然后再用这个更厉害的服务器运行

流程：

1.基础命令：npm run build

build之后运行打包的dist文件夹下的index.html的时候会发现页面什么都没有并且console中有很多的404错误我们打包之后静态资源文件路径有问题所以我们需要修改

2.修改静态资源路径 publicPath:"./" 去vue.config.js中进行修改

3.在吧路由模式进行hash的切换

打包安卓ios

hbuilderx 选择文件 ---》新建----》项目 ----》h5+app----》发行--云打包------》报错修改以下两个配置（安心和直接打包都可以）

manifest.json配置--模块配置---取消勾选--Contact(通讯录)--权限配置--取消勾选--<uses-permission android:name="android.permission.READ_CONTACTS"/>
-------》发行--云打包--等待即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cxy_pan0913

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 项目利用 HBuilderX 打包 APP 流程

前端知识分享喵

05-12

8178

想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。

vue项目通过hbuilderx打包为apk

Debug的博客

06-28

822

1.vue项目npm run build 得到dist文件夹 dist文件夹内容示例新建5+APP项目空的5+APP项目文件夹情况将dist文件夹下的内容粘贴（并覆盖）到5+APP下后

参与评论您还未登录，请先登录后发表或查看评论

HBuilderX 打包 vue 项目生成 apk

GIS（地理信息系统）

07-15

1798

HBuilderX 打包 vue 项目生成 apk

使用Hbuilderx将vue项目打包成App

weixin_48398799的博客

05-21

443

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.其它配置项可选配，不配置的话就可

使用 HBuilderX 将网页打包为安卓 APP详细步骤

最新发布

好好学电脑

09-30

1554

本文介绍了使用HBuilderX将网页打包为安卓APP的详细步骤。首先需安装HBuilderX并导入网页项目，然后重点配置manifest.json文件，包括基础信息、图标、权限和页面入口等核心内容。接着通过云打包功能，选择测试版或正式版证书完成打包。最后测试APK功能并发布到应用商店。文章还提供了常见问题的解决方案，强调正确配置manifest.json是关键。整个过程无需本地安卓开发环境，操作简便。

使用Hbuilderx将vue项目打包为apk

2201_75829410的博客

03-25

974

教你三分钟把vue项目使用hubilderx打包

用HBuilderX 打包 vue 项目为 App 的步骤

bear_79的专栏

12-31

1449

首先打包你的vue项目生成dist文件夹，教程请移步https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程，请确保你是将：项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的dist文件。开始使用HBuid...

HBuilderX打包H5、vue项目

bestyinjun的专栏

12-19

2288

HBuilderX打包H5、vue项目

vue项目+hbuilder打包实现app自动检测更新并下载(需要可以私聊我)

09-30

vue项目+hbuilder打包实现app自动检测更新并下载vue项目+hbuilder打包实现app自动检测更新并下载

HbuilderX 打包 Vue 项目为 App

WinkEmoji的博客

01-27

551

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

1517

使用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的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用HBuilderX将vue或H5项目打包app

鹏仔工作室的秘密基地

08-23

5499

好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。

HBuilder 打包

weixin_46243213的博客

10-07

2408

HBuilder 打包

HBuilder X打包vue项目成APP

呔！妖怪

09-08

663

HBuilder X打包vue项目新建5+app项目然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己vue项目打包好的dist文件里边的内容配置manifest.json好相关的内容鼠标右键云打包之前最好是通过手机基座测试没问题后再进行云打包关于打包后的路劲问题去config下的index.js中的buil...

使用HBuilderX打包vue生成安装包apk

youyouyouyou44的博客

03-27

1963

在打包vue程序的过程中，遇到了很多问题： 1、HBuilder模拟器查看的界面空白刚开始使用的HBuilder打包，结果安装以后无法运行，界面上什么都没有，然后使用HBuilder调试基座查看，还是不能查看，在此之前是可以成功查看的，后来检查了一下主要是我使用了路由Router的问题，不使用路由的时候是可以正常运行查看的，后来查了一下有人说是版本的问题...

vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园

没做过产品的后端不是个好前端

11-11

456

一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。（1）页面空白的解决：打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径（2）css引用图片资源找不到问题：因为打包后路径发生变化，导致..

hbuilderx打包vue项目为app

05-09

<think>好的，用户想了解如何使用HBuilderX将Vue项目打包成APP。首先，我需要回顾之前的引用内容，确保信息准确。根据引用[1]、[2]、[3]，HBuilderX打包Vue项目有几个关键步骤：准备Vue项目、配置vue.config.js、打包成H5、导入HBuilderX、配置manifest.json、最后打包生成APP。用户可能已经知道基本的Vue开发，但可能不熟悉如何调整配置以适应HBuilderX的要求。需要详细说明每个步骤，特别是修改publicPath为相对路径，这是为了避免静态资源路径错误。另外，manifest.json的配置涉及应用名称、图标等，用户可能需要指导如何正确设置这些参数。同时，提到沉浸式状态栏的配置，引用[3]中有相关链接，可能需要简要解释或提供关键点，方便用户操作。用户可能遇到的问题包括：打包后的资源路径不正确、图标不显示、原生功能集成等。因此，在步骤中需要强调检查路径和真机调试的重要性。此外，生成的相关问题需要考虑用户可能的后续疑问，比如性能优化、原生功能扩展和上架流程，这些都需要提前准备解答。需要确保语言简洁，步骤清晰，避免使用专业术语过多，让新手也能跟随操作。同时，引用标记要正确对应，比如vue.config.js的修改引用[1]，整体流程引用[2]，沉浸式状态栏引用[3]。最后，相关问题要覆盖用户可能想深入的方向，帮助他们进一步探索。</think>### HBuilderX 打包 Vue 项目为 APP 完整教程 #### 一、前期准备 1. **Vue 项目要求** - 确保项目使用 Vue CLI 构建（推荐 Vue CLI 4.1.2+） - 安装依赖并完成本地调试，保证功能正常 2. **工具安装** - 下载 [HBuilderX](https://www.dcloud.io/hbuilderx.html)（选择标准版或 App 开发版） - 安装 Android/iOS 模拟器或准备真机调试环境 --- #### 二、Vue 项目打包为 H5 1. **配置静态资源路径** 在项目根目录新建 `vue.config.js`，添加以下内容（关键配置）： ```javascript module.exports = { publicPath: './', // 必须设置为相对路径[^1] outputDir: 'dist', // 打包输出目录 assetsDir: 'static' // 静态资源目录 } ``` 2. **执行打包命令** ```bash npm run build ``` 生成 `dist` 文件夹，包含 `index.html` 和静态资源文件 --- #### 三、HBuilderX 操作流程 1. **创建移动应用项目** - 新建「5+ App」项目 - 删除默认 `index.html`，将 `dist` 文件夹内容复制到项目根目录 2. **配置 manifest.json** - **基础设置**：应用名称、版本号、应用标识（如：com.example.app） - **图标配置**：准备 192x192 PNG 图标，替换默认图标 - **模块配置**：按需勾选「Geolocation」「Push」等原生模块[^2] - **沉浸式状态栏**：在「源码视图」中添加： ```json "plus": { "statusbar": { "immersed": true } } ```[^3] --- #### 四、生成 APP 安装包 1. **真机调试** 通过 USB 连接手机，选择「运行」->「运行到手机或模拟器」，验证功能 2. **正式打包** - 选择「发行」->「原生 App-云打包」 - 选择 Android/iOS 平台，勾选「使用 DCloud 老版证书」快速测试 - 等待云端生成安装包（约 3-5 分钟） --- #### 五、注意事项 1. **路径问题**：若页面空白，检查所有资源路径是否使用相对路径 2. **原生功能**：需通过 `plus` 对象调用设备 API，例如： ```javascript document.addEventListener('plusready', function() { var webview = plus.webview.currentWebview(); }); ``` 3. **性能优化**：建议启用「V8 引擎优化」和「资源压缩」