vue项目打包成App

已于 2023-07-26 11:47:28 修改
阅读量2.1k 收藏 10
点赞数 2
文章标签： vue.js 前端 javascript
于 2023-07-24 18:38:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38673922/article/details/131902454
版权

地址一
地址二
地址三

一、将项目开发完成后，在vue.config.js 文件中添加路径

publicPath:‘./’
在这里插入图片描述
在router/index.js关闭路由的history模式（默认哈希）

二、npm run build，生成的dist文件目录

在这里插入图片描述

三、打开 HBuilder X 开发工具

新建 => 项目 => 选择 5+app => 输入项目名称

四、只保留manifest.json文件

在这里插入图片描述
将生成的dist文件夹里面的内容复制，放进该文件夹（app1.0）中

五、配置manifest.json文件

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

六、打包

找到HBuilder X 工具栏 => 发行 => 原生App-云打包 选择公共测试证书
在这里插入图片描述

七、会显示打包后的apk文件路径 => 保存到手机安装

在这里插入图片描述

Zh.冠军
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目用HBuilder打包APP.docx
09-09
详细介绍vue项目用HBuilder打包APP的步骤，以及安卓手机两次退出的解决方法，并且判断主页面提示两次退出程序，子页面不提示
【安卓开发】将Vue项目打包为app
你不来，再美的天地，都狼藉 ~
05-13 8931
一文带你将Vue项目发布app！
vue项目如何打包以及如何变成android、ios应用程序
最新发布
2401_84435192的博客
06-18 388
在中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:publicPath: “./”,// 需要配置 否则打包后的apk文件安装在手机可能白屏port: “6868”, // 配置开发服务器的端口号（打包可以无需配置）// 配置跨域代理(也可以使用CROS解决跨域)proxy: {“/ api”: {
vue打包为App手摸手教你
技术前端，忠于热爱 @0.活在风浪里
11-27 4454
一、修改请求静态资源的路径 打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assets
Vue项目打包App步骤
kangkang212916的博客
06-10 879
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
Vue项目打包移动端App(App打包教程)，简便直接
热门推荐
【CSDN】
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 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6384
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports ...
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
10-14
在Vue项目中，将应用打包成APP涉及到一系列的配置和步骤。当静态资源能够正常显示，但API请求无法获取数据时，通常问题出在跨域配置和打包设置上。以下是一些关键知识点和解决方法： 1. **跨域问题**： 在开发环境...
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
10-14
主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
Vue CLI或Vue项目利用HBuilder打包成移动端App的操作流程涵盖了多个关键步骤，这些步骤对于将Web应用程序转换为可在移动设备上运行的应用程序至关重要。以下是详细的知识点解释： 1. **测试项目**： 在开始打包...
vue打包app
wsy的博客
12-01 444
1.项目终端执行打包命令，命令执行完毕会在模具中看到dist文件夹 2.HBuilder X新建一个5+App项目 3.将打包好的dist文件夹内容复制到新创建的5+App项目内 4.基础配置：应用标识、应用名称、版本名称、版本号、应用描述 5.图标配置 6.点击发行选择原声app-云打包，这里选择的是使用公共测试证书，真实打包要勾选自有证书 7.点击打包后会弹出打包检验点击继续 8.出现以下错误将通讯录权限关闭，重新打包 9.打包完
Hbuilder将vue项目打包为app（具体步骤和注意点）
...
10-04 4145
Hbuilder将vue项目打包为app（具体步骤和注意点）
Vue项目如何打包成app
weixin_42601608的博客
01-04 849
要打包 Vue 项目成 app，你可以使用一些工具，如 Cordova、Electron 或者 NativeScript。 使用 Cordova 打包： 安装 Cordova：npm install -g cordova 创建 Cordova 项目：cordova create my-app 进入项目目录：cd my-app 添加平台，如 Android：cordova platform add...
vue项目打包App
z1815367894的博客
07-04 120
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
vue打包为App手摸手教你，2024年最新前端开发经验的有效总结
m0_57502067的博客
04-10 736
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。
vue（H5）打包成app方法和步骤
m0_38007556的博客
09-16 1646
vue打包成app是一种将vue项目转换为移动端应用的方法，可以让用户在手机上直接使用vue开发的网页。要实现这个功能，需要借助一个工具叫HBuilderX，它是一个支持多端开发的IDE，可以让开发者用vue开发5+App，也就是可以运行在Android和iOS上的混合应用。4. 选择发行-原生App云打包，在弹出的窗口中选择打包平台（Android或iOS），选择证书（Android可以使用免费的公用证书），点击开始云打包。3. 打开manifest.json文件，配置应用的名称、图标、版本等信息。
vue项目打包成移动端app
05-26
要将Vue项目打包成移动端app，你可以使用一些工具，比如： 1. Apache Cordova：Cordova是一个开源框架，可以将Web应用程序打包为本机应用程序，并且适用于多个平台，包括iOS和Android。你可以使用Cordova将Vue项目打包成本地应用程序。 2. Ionic Framework：Ionic是一个基于Angular的移动应用程序开发框架，它使用HTML、CSS和JavaScript构建应用程序，并且可以使用Cordova将其打包成本地应用程序。你可以使用Ionic Framework将Vue项目打包成移动应用程序。 3. Framework7：Framework7是一个基于HTML、CSS和JavaScript的移动应用程序开发框架，它专注于iOS和Android的外观和感觉，并且可以使用Cordova将其打包成本地应用程序。你可以使用Framework7将Vue项目打包成移动应用程序。 以上这些工具都可以将Vue项目打包成移动应用程序，你可以根据自己的需求选择最适合你的工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值