vue打包app

已于 2022-12-01 19:00:58 修改
阅读量557 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端
于 2022-12-01 17:48:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Zhwsy/article/details/128135647

1.项目终端执行打包命令，命令执行完毕会在目录中看到dist文件夹

410b55a1f96c41358207c81e8e9fbe28.png

0de9b3ebb722408b82d3e6f55edac534.png 

 2.HBuilder X新建一个5+App项目

2c035a524e4148acb3c766d76ab4e720.png

 3.将打包好的dist文件夹内容复制到新创建的5+App项目内

c7e52aa3be6e437bb2da301708edba53.png

 4.基础配置：应用标识、应用名称、版本名称、版本号、应用描述

8ea92147ec8a4455a9aed2751f593bce.png

 5.图标配置

7498fdb35d244ac9bdef7d35b816e495.png

 6.点击发行选择原声app-云打包，这里选择的是使用公共测试证书，真实打包要勾选自有证书

62eff11d9d38457586762f1f5e3d4e26.png 

7.点击打包后会弹出打包检验点击继续

a1b005b448764edf9002c421d21325be.png

 8.出现以下错误将通讯录权限关闭，重新打包

13d72305d0b043909391960fc183b0e1.png

681dcb9bfc1b4f8abf23e21ae1d10c99.png 

9.打包完成会在控制台显示具体信息

736f7f647d9d43cfaab68cb927b1fe35.png 

 

 

Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 7838
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
Cordova+Vue打包APP
DayDreamWMM的博客
12-07 3075
打包APP步骤：（除非特殊说明，以下步骤均为Windows环境） 1.安装node环境 2.安装cordova插件 3.配置安卓的SDK和JDK环境变量（Android），配置iOS的xcode环境（iOS） 4.整合vue到cordova 安装node环境： 首先去官网下载node.js，传送门node.js下载地址，推荐下载长期支持版 Node.js下载完成之后，一步步默认安装就可以，安装完...
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，文件->打开目录，如下图
Vue3+Vite开发的移动端项目如何打包成app。(经验分享)
最新发布
专研技术的大学生:会点Java和前端
06-11 984
本文介绍了使用Vite打包Vue3移动端H5应用的完整流程。首先通过npm run build生成dist目录，然后在HBuilder中新建5+App项目并替换静态资源文件。重点说明了manifest.json配置注意事项和云打包操作，提供了避免白屏问题的解决方案（配置vite路径为相对路径）。最后强调在开发过程中需关注移动端适配、路由配置等关键点，并要及时处理页面加载异常等问题。该指南为开发者提供了从项目构建到APP打包的完整路径参考。
vue项目打包成App
weixin_38673922的博客
07-24 2931
找到HBuilder X 工具栏 => 发行 => 原生App-云打包 选择公共测试证书。在router/index.js关闭路由的history模式（默认哈希）将生成的dist文件夹里面的内容复制，放进该文件夹（app1.0）中。新建 => 项目 => 选择 5+app => 输入项目名称。
将vue项目打包为安卓软件
xc9711的博客
08-31 3300
将vue打包android安卓软件过程
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实现检查更新功能
我不喜欢打代码的博客
11-03 1317
Vue打包app实现检查更新功能 最近接收到一个需求，就是把移动h5的代码打包成安卓app 这个确实很符合这个时代“一套代码，多处编译”的趋势 而且混生App发展到这个时期 也已经可以做到很多原生app所能做到的事情 我的项目是使用Vue搭建的，我选择的打包方式是使用HbuilderX打包 而这次的需求是app的检查更新功能（未上架各类市场） 开始这个需求之前，我构思了一下思路，大概如下 1.app会有一个版本号，可以根据版本号来判定是否更新 2.可以让后端编写接口，返回当前发布版本号（需要更新的版本号），
使用vue打包时vendor文件过大或者是app.js文件很大的问题
10-18
以上介绍的方法，可以有效解决使用Vue打包时vendor文件过大和app.js文件体积过大的问题。通过CDN引入依赖、配置webpack externals以及使用Vue路由懒加载，可以降低打包文件的大小，提高应用的加载性能。同时，取消...
vue项目+hbuilder打包实现app自动检测更新并下载(需要可以私聊我)
09-30
vue项目+hbuilder打包实现app自动检测更新并下载vue项目+hbuilder打包实现app自动检测更新并下载
vue打包为App手摸手教你，2024年最新前端开发经验的有效总结
m0_57502067的博客
04-10 1119
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。
Vue项目打包App步骤
kangkang212916的博客
06-10 970
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
【安卓开发】将Vue项目打包为app
你不来，再美的天地，都狼藉 ~
05-13 1万+
一文带你将Vue项目发布app！
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项目 打包成apk(android)
weixin_56831647的博客
07-20 1911
将vue项目打包成apk
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...
vue打包app实现侧滑返回上一页
07-27
你可以使用 Vue Router 和 Vue 的过渡效果来实现侧滑返回上一页的功能。下面是一个简单的示例代码： 首先，确保你已经安装了 Vue Router 和 Vue： ``` npm install vue-router ``` 然后，创建一个 Vue Router 实例，并配置路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/page1', component: Page1 }, { path: '/page2', component: Page2 } ] }) ``` 在你的页面组件中，使用 Vue 的过渡效果来实现侧滑效果。你可以使用 `<transition>` 组件包裹页面内容，并使用 CSS 过渡效果来实现侧滑动画。例如： ```vue <template> <div> <transition name="slide"> <router-view></router-view> </transition> </div> </template> <style> .slide-enter-active, .slide-leave-active { transition: transform 0.3s; } .slide-enter, .slide-leave-to { transform: translateX(100%); } </style> ``` 在上面的示例中，页面组件会通过 `<router-view>` 渲染，而在切换页面时会触发过渡效果。通过设置不同的 CSS 类名，你可以定义进入和离开时的动画效果。 最后，在你的模板中，使用 `<router-link>` 组件来导航到其他页面。例如： ```vue <template> <div> <router-link to="/page1">Page 1</router-link> <router-link to="/page2">Page 2</router-link> </div> </template> ``` 这样，当用户点击链接时，页面会进行侧滑切换，并具有返回上一页的效果。 希望这个示例能帮助到你！如果有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值