Vue项目打包App步骤

最新推荐文章于 2025-06-11 12:10:28 发布
原创 最新推荐文章于 2025-06-11 12:10:28 发布 · 970 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

该文详细阐述了如何将Vue项目的跨域代理地址改为实际URL，调整Vue的公共路径，以及针对Vue2和Vue3修改路由模式。接着，通过npmrunbuild命令打包项目，然后在Hbuilder中创建H5+app项目，导入打包后的dist文件夹。进一步配置manifest.json，包括AppID、应用名和图标，并修改模块权限。最后，通过Hbuilder的云打包服务生成Android应用，下载并安装到手机上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址
  myDouyu/api/RoomApi/game  ==>  http://open.douyucdn.cn/api/RoomApi/game
(如果有在线字体图标, 图标引入地址@font-face中的url前加http)

2, 在vue.config.js中,修改公共路径 publicPath : './'

3, vue2:在路由文件/src/router/index.js 中把路由历史模式注释掉   // mode: 'history'  或改成默认的 hash 模式
   vue3:在路由文件/src/router/index.js 中把路由历史模式改成哈希模式    history:createWebHashHistory("/#")

4, 在终端执行打包 npm run build  ,获得发布包 dist 文件夹 

6, 打开Hbuilder, 新建H5+app项目, 把dist文件夹中的内容拖入替换掉新项目中文件 

7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86

8, 点击Hbuilder菜单栏的 发行=>原生App-云打包  , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项   然后点击下方  打包 按钮 , 开始云打包

9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可

Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 7838
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
vue项目打包成安卓app步骤（Hbuilder打包）
boy火巨的博客
07-18 2705
1.首先保证vue项目正常的，再用自带的打包程序 运行npm run build 打包完成后代码在根目录dist 文件夹内， 2.然后在Hbuilder中打开这个dist文件夹，这时，这个项目是web应用的项目 需要把它转成app应用的项目，鼠标右键转换成移动app，dist的图标会由 W 变成 A 3.打开dist目录下的index.html，格式化一下代码 在每个有...
Vue项目如何打包成app
weixin_42601608的博客
01-04 1055
要打包 Vue 项目成 app，你可以使用一些工具，如 Cordova、Electron 或者 NativeScript。 使用 Cordova 打包： 安装 Cordova：npm install -g cordova 创建 Cordova 项目：cordova create my-app 进入项目目录：cd my-app 添加平台，如 Android：cordova platform add...
HubliderX将Vue3离线包打包生成App，以及解决打包后的APP出现白屏的问题（简单示例）
小夏同学呀
09-04 1439
将vue3离线包打包生成app
Vue3+Vite开发的移动端项目如何打包成app。(经验分享)
专研技术的大学生:会点Java和前端
06-11 983
本文介绍了使用Vite打包Vue3移动端H5应用的完整流程。首先通过npm run build生成dist目录，然后在HBuilder中新建5+App项目并替换静态资源文件。重点说明了manifest.json配置注意事项和云打包操作，提供了避免白屏问题的解决方案（配置vite路径为相对路径）。最后强调在开发过程中需关注移动端适配、路由配置等关键点，并要及时处理页面加载异常等问题。该指南为开发者提供了从项目构建到APP打包的完整路径参考。
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后  （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports = {   publicPath: “./”,    //   打包 配置这个可以先本地查看下 效果   productionSourceMap: false     //  调试文件的功能关闭 能加快打包 }; 运行命令行   npm run build 项目文件夹下生成一个 dist文件夹 下面有这些文件  然后打开index.html 本地
利用HBuilder将vue项目打包成移动端app
热门推荐
zhoudan232的博客
06-19 8万+
事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目 1，将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './' 2，执行npm run build之后生成dist文件夹 3，打开HBuilder，文件->打开目录，如下图
vue项目打包成App
weixin_38673922的博客
07-24 2931
找到HBuilder X 工具栏 => 发行 => 原生App-云打包 选择公共测试证书。在router/index.js关闭路由的history模式（默认哈希）将生成的dist文件夹里面的内容复制，放进该文件夹（app1.0）中。新建 => 项目 => 选择 5+app => 输入项目名称。
vue打包app
wsy的博客
12-01 557
1.项目终端执行打包命令，命令执行完毕会在模具中看到dist文件夹 2.HBuilder X新建一个5+App项目 3.将打包好的dist文件夹内容复制到新创建的5+App项目内 4.基础配置：应用标识、应用名称、版本名称、版本号、应用描述 5.图标配置 6.点击发行选择原声app-云打包，这里选择的是使用公共测试证书，真实打包要勾选自有证书 7.点击打包后会弹出打包检验点击继续 8.出现以下错误将通讯录权限关闭，重新打包 9.打包完
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
没做过产品的后端不是个好前端
11-11 427
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题： 因为打包后路径发生变化，导致..
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
10-14
在Vue项目中，将应用打包成APP涉及到一系列的配置和步骤。当静态资源能够正常显示，但API请求无法获取数据时，通常问题出在跨域配置和打包设置上。以下是一些关键知识点和解决方法： 1. **跨域问题**： 在开发环境...
用HbuildX打包vue 项目为App，打包app 可嵌套访问vue项目
weixin_44514665的博客
11-23 1852
场景 用vue写好了H5 app项目，现在想要把这个项目打包成App，也就是将vue项目打包成app上架，测试。 用Hbuild 打包vue项目主要步骤 打开hbuildx，新建一个5+App项目 然后修改项目中生成的index.html文件内容，填写需要访问的网址，填写测试连接就是打包测试包，也可以打包发布包 根据项目修改manifest.js 的文件配置 以上配置好之后，原生APP云打包，就...
将vue项目打包为安卓软件
xc9711的博客
08-31 3299
将vue打包android安卓软件过程
【安卓开发】将Vue项目打包为app
你不来，再美的天地，都狼藉 ~
05-13 1万+
一文带你将Vue项目发布app！
使用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项目打包移动端App(App打包教程)，简便直接
【优快云】
08-15 1万+
Vue打包成.apk安装的过程中遇到的问题问题1：打包成的apk在真机上显示空白界面项目文件路径引用错误，导致文件加载为404vue打包后的文件时存在于dist目录下的，也就是说dist目录作为根目录。在dist目录中启动一个本地服务其访问地址为http://localhost:8080/index.html,即可访问首页dist目录下的index.html文件并加载对应的js,css文件，也就是说文件启动根目录是和dist目录中的index.html是平级的。......
vue项目打包成app
zhangxiaodui的博客
07-12 7470
1.将vue项目打包生成dist文件夹 2.下载HbuilderX的APP开发版并且登录 3.在HbuilderX里点击文件>新建>项目，选择5+APP，填写项目名称和存储位置，模板选择空项目。点击创建即可。 4.将HbuilderX里新建项目里的js、css、image文件夹以及index.html删掉。打包的dist的文件夹里的static文件夹和index.html复制粘贴进去。 5.打开manifest.json文件配置几个核心项。 选择基础配置，将应用名称填写上，应用标识（APPID）
vue项目打包成为app
最新发布
08-05
<think>我们正在讨论如何将Vue项目打包为移动应用（App），使用Cordova或Capacitor工具。 根据之前的引用，我们知道Capacitor是Ionic团队推出的一个替代Cordova的工具，并且它支持Cordova插件，也可以用于非Ionic项目。 步骤概述： 1. 构建Vue项目（生成dist目录） 2. 安装并配置Cordova或Capacitor 3. 将构建好的Vue项目输出目录（dist）复制到Cordova或Capacitor的www目录中 4. 添加所需的移动平台（如Android或iOS） 5. 构建并运行应用 下面分别介绍使用Cordova和Capacitor的步骤。 ### 使用Cordova打包Vue项目 1. **构建Vue项目** 在Vue项目根目录下运行： ```bash npm run build ``` 这将在项目根目录下生成`dist`文件夹（假设你没有修改输出目录）。 2. **安装Cordova** 如果还没有安装Cordova，请先全局安装： ```bash npm install -g cordova ``` 3. **创建Cordova项目** 在Vue项目之外（或之内）的目录中创建一个新的Cordova项目（避免覆盖Vue项目）： ```bash cordova create myapp com.example.myapp MyApp ``` 其中`myapp`是项目目录名，`com.example.myapp`是应用ID，`MyApp`是应用名称。 4. **删除Cordova默认的www目录内容，并将Vue项目的dist目录内容复制过去** ```bash cd myapp rm -rf www/* cp -r /path/to/your/vue-project/dist/* www/ ``` 5. **添加平台** ```bash cordova platform add android # 或 cordova platform add ios ``` 6. **运行应用** ```bash cordova run android # 或 cordova run ios ``` ### 使用Capacitor打包Vue项目 1. **构建Vue项目** 同样，先构建Vue项目： ```bash npm run build ``` 2. **在Vue项目中安装Capacitor** 在Vue项目根目录下执行： ```bash npm install --save @capacitor/core @capacitor/cli ``` 3. **初始化Capacitor** ```bash npx cap init ``` 此命令会要求你输入应用名称和应用ID（例如：`com.example.myapp`）。 4. **添加平台** ```bash npx cap add android npx cap add ios ``` 5. **配置Vue项目的输出目录** 在Capacitor配置文件`capacitor.config.json`中，设置`webDir`为Vue项目的构建输出目录（默认为`dist`）： ```json { "appId": "com.example.myapp", "appName": "MyApp", "webDir": "dist", "bundledWebRuntime": false } ``` 6. **将Vue构建内容复制到Capacitor项目中** 每次构建Vue项目后，都需要运行： ```bash npx cap copy ``` 这个命令会将`dist`目录的内容复制到Capacitor的`webDir`目录（在Android和iOS项目中）。 7. **打开IDE运行应用** 对于Android： ```bash npx cap open android ``` 这将在Android Studio中打开项目，然后你可以在Android Studio中运行应用。 对于iOS： ```bash npx cap open ios ``` 在Xcode中打开项目并运行。 注意：Capacitor不会像Cordova那样覆盖www目录，而是将web资源直接复制到原生项目中。 ### 注意事项 - 确保在Vue项目中正确设置了`publicPath`（在`vue.config.js`中），因为移动应用通常是从文件系统加载，所以可能需要设置为相对路径（`./`）或空字符串。 - 如果遇到路由问题，可能需要使用`hash`模式（因为文件协议不支持HTML5的history模式）。 - 如果需要使用原生功能，可以安装Capacitor或Cordova的插件。 引用说明：Capacitor是由Ionic团队推出的一个跨平台原生运行时，用于构建Web Native应用，支持Cordova插件[^1]。OktaDev项目提供了对Capacitor的支持[^2]。 §§相关问题§§ 1. 在Vue项目中如何配置路由以适应移动应用的文件协议？ 2. 如何使用Capacitor插件访问设备功能（如相机）？ 3. Cordova和Capacitor在打包移动应用时的主要区别是什么？</think>### 如何用 Cordova 或 Capacitor 打包 Vue.js 项目为移动应用 #### 一、基础准备 1. **构建 Vue 项目** 在项目根目录执行构建命令生成静态文件： ```bash npm run build ``` 生成文件默认位于 `dist` 目录。 2. **安装必要工具** - Cordova：`npm install -g cordova` - Capacitor：`npm install @capacitor/core @capacitor/cli` --- #### 二、使用 Cordova 打包 1. **初始化 Cordova 项目** ```bash cordova create my-app com.example.myapp MyApp cd my-app ``` 2. **添加平台支持** ```bash cordova platform add android # 或 ios ``` 3. **替换默认资源** 删除 `www` 目录内容，复制 Vue 构建文件： ```bash rm -rf www/* cp -r /path/to/vue-project/dist/* www/ ``` 4. **构建并运行** ```bash cordova build android cordova run android # 连接设备或使用模拟器 ``` --- #### 三、使用 Capacitor 打包（推荐） 1. **在 Vue 项目中初始化 Capacitor** ```bash npx cap init ``` 按提示输入应用名称和包 ID（如 `com.example.app`）。 2. **配置 `capacitor.config.json`** 修改输出目录指向 Vue 构建结果： ```json { "appId": "com.example.app", "appName": "MyVueApp", "webDir": "dist", // Vue 构建目录 "bundledWebRuntime": false } ``` 3. **添加平台** ```bash npx cap add android npx cap add ios # 需 macOS 环境 ``` 4. **同步资源** 每次 Vue 构建后执行： ```bash npm run build npx cap copy # 复制资源到原生项目 ``` 5. **打开 IDE 运行** ```bash npx cap open android # 在 Android Studio 中编译运行 npx cap open ios # 在 Xcode 中编译运行 ``` --- #### 四、关键注意事项 1. **路由兼容性** 使用 `hash` 模式（文件协议不支持 history 模式）： ```javascript const router = new VueRouter({ mode: "hash" }); ``` 2. **API 访问** - Cordova：通过 `cordova-plugin-whitelist` 配置访问白名单 - Capacitor：在 `capacitor.config.json` 添加 `server` 配置： ```json "server": { "allowNavigation": ["*.your-api.com"] } ``` 3. **原生功能扩展** 安装插件（如相机）： ```bash # Capacitor npm install @capacitor/camera npx cap sync # Cordova cordova plugin add cordova-plugin-camera ``` 4. **跨域问题** 开发时配置代理（`vue.config.js`）： ```javascript devServer: { proxy: "http://your-api.com" } ``` --- #### 五、平台差异对比 | **特性** | **Cordova** | **Capacitor** | |------------------|---------------------------------|-----------------------------------| | 维护团队 | Apache 基金会 | Ionic 团队 [^1] | | 插件兼容性 | 原生插件系统 | 支持 Cordova 插件 [^1] | | 项目结构 | 集中管理 `www` 资源 | 原生项目直接集成资源 | | 开发体验 | 命令行操作 | 与现代前端工具链深度集成 | | 推荐场景 | 旧项目迁移 | 新项目首选（尤其 Ionic 生态）[^2] | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值