记录vue打包app的操作

最新推荐文章于 2024-06-25 14:43:35 发布
最新推荐文章于 2024-06-25 14:43:35 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： Vue学习 文章标签： vue 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuefeng11111/article/details/86502125
版权

打包vue项目

  1. 将config目录下的index.js中的proxyTable内容清空
  2. host 设置为localhost, 端口号为8080
  3. getData文件中的axios设置默认URL, 并将所有的请求接口的/api去掉
axios.defaults.baseURL = 'https://自己的接口域名地址'
  1. 运行打包命令
$ npm run build
  1. 修改dist目录下的index.html中的所有的/statci为./static
    注意：此处必须修改，不然打包之后页面会空白

在hbuilder中打开dist目录，右键转换成移动App

在这里插入图片描述

然后再右键->发型->云打包-打原生安装包

在这里插入图片描述

然后点击打包等待打包完成即可

在这里插入图片描述

明天又会在哪里
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包android
qzh88888888的博客
10-19 811
命令执行完后，如果成功，在android-app\platforms\android\app\build\outputs\apk\debug目录下会生成app-debug.apk安装文件。Android版本的安装，我这里选择8.0，因为我接下来安装的cordova也是8.0,笔者在安装其他版本踩过大坑，我建议刚学习的伙伴尽量按照我的方式走，可以避坑。今天配置vue android打包环境足足花了我6个小时，终于弄好了，在此记录一下，期间的曲折整过的伙伴们应该知道，如果用二个字形容：“崩溃”
vue项目用HBuilder打包APP.docx
09-09
通过以上步骤，你不仅学会了如何使用Vue和HBuilder X打包APP，还了解了如何处理安卓设备上的特定问题，如两次滑动退出和刘海屏适配。现在，你可以按照这些步骤，将你的Vue项目转化为可在手机上运行的APP，并享受...
【安卓开发】将Vue项目打包为app
你不来，再美的天地，都狼藉 ~
05-13 8928
一文带你将Vue项目发布app！
一文揭秘Vue3组件库的优雅打包与细节
最新发布
2401_83384536的博客
06-25 1101
这里我会介绍本次实战中会用到的各种插件、工具和他们的作用简介，希望可以帮助大家更清晰地了解本文的内容。另外我会附上每个插件的gayhub地址，感兴趣的同学可以戳进去详细了解。支持在 gulpfile 使用 esm（import、export）的模块化写法支持在 gulpfile 使用 ts提供了一种快速、灵活的方式来匹配文件和目录。支持 vite 解析.vue后缀的单文件组件(SFC)，类似 webpack 中我们用的vue-loader支持 vite 解析jsx/tsx。同第3。
记录Vue打包
ccxbt的博客
05-18 794
记录Vue打包，主要是代码加密和分割。
Vue HBuilder打包为app流程
得已
06-04 1172
vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题 事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目 1，将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './' 2，执行npm ru...
Vue打包记录
qq_43128835的博客
04-08 344
在上一篇文章中记录vue 简单集成环信Web sdk，在这里再说下打包的问题 使用hubilder进行真机运行 在config 中找到index.js 将 assetsPublicPath: '/' 改成如下图所示 在build文件夹中打开webpack.prod.conf.js 找到output： 配置，增加 publicPath: './' 然后执行 npm run build ，就会生成...
Vue项目打包成移动端APP
热门推荐
追梦&天空的博客
09-25 3万+
Vue项目打包成移动端APP 需要准备的工具：Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后，就可以在手机上进行真机调试了 真机测试没有问题，就可以进行下一步---》打包apk了 最后将apk安装包安装到手机上就可以正常使用了...
使用HBuilderX将vue或H5项目打包app
鹏仔工作室的秘密基地
08-23 4959
好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。
uniapp+vue3打包问题记录
weixin_41844140的博客
01-15 644
uniapp+vue3打包
HbuildX 用vue打包app调用微信支付
weixin_44079209的博客
04-18 1815
我有一个项目是用vue写的，现在要打包成app用的是hbuilderX,目前想到的唯一方法就是用5+app里的调用支付代码，然后去看5+app文档，微信官方支付文档 // 获取请求参数 this.axios({ url: 后端给的请求接口' + 发送请求获取的订单编号, headers: { Aut...
解决vue build打包之后首页白屏的问题
08-27
- 监控日志：在生产环境中开启Vue的错误追踪和日志记录，以便更快定位问题。 综上所述，解决Vue build打包后首页白屏的问题主要涉及调整静态资源的路径配置。同时，理解其他可能的原因和采取相应的优化措施，将有...
iq.zip_vue app
09-15
Vue.js应用通常使用Node.js的npm（Node Package Manager）来管理项目依赖，进行构建和打包操作。因此，在尝试运行或构建此应用之前，确保已经安装了Node.js是必要的步骤。 在开发Vue应用时，通常会有一个基本的项目...
Places-Vue-App
02-13
你可以在项目中的`vue.config.js`文件中定义这些配置，例如更改输出目录、设置代理服务器、调整打包优化策略等。如果项目没有提供此文件，你可以根据需要创建它。 项目文件`places-vue-app-main`很可能包含了项目的...
基于Vue20模仿微信APP
08-12
【Vue2.0模仿微信APP】项目是一个使用Vue.js、Vuex、Vue-router和Webpack 2.0构建的前端应用，旨在实现与微信APP类似的功能。这个项目充分展示了Vue.js框架的强大特性和现代前端开发流程。 ### Vue.js Vue.js是当前...
关于Vue中debugger定位失效问题
xuefeng11111的博客
06-09 7728
相信很多人进行项目配置的时候都会这样命名xxx/index.vue 可能刚开始这样的命名并没有什么问题，但是当index.vue文件多起来之后，当你debugger的时候可能就会发现，找不到你要定位的文件了，但是我们这样的文件命名确实是符合规范的，所以我们就需要找到一个解决的办法 这个问题的答案网上一搜一堆，但是无非就是设置source-map，但是真的管用吗，至少我试过很多次是不管用的 直到有一次，偶然发现了一个方法，可以解决这个问题，虽说有点取巧，但是确实是真的解决了 方法如下 首先，我们先打开要d
Vue3中自定义指令监听元素尺寸变化
xuefeng11111的博客
10-28 5251
vue对元素的宽高变化看了一下，基本都是用的定时器解决的，刚好看到JS的一个属性方法，可以专门监测元素的尺寸变化 CDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver 实现代码如下 directives: { resize: { mounted(el, binding) { // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:300`表示300m.
vue单元测试SyntaxError: Unexpected token ‘export‘
xuefeng11111的博客
09-05 4630
贴上错误信息，方便搜索引擎查找类似错误 Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your
vue 打包beta app.js
07-28
要将Vue打包成beta app.js，你可以按照以下步骤进行操作： 1. 在webpack.base.config.js文件中，找到entry属性，并将其设置为你的入口文件路径，例如：'./src/main.js'。\[1\] 2. 在webpack.base.config.js文件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值