vue3+vite+ts的项目打包后使用静态资源dist用5+app打包成APP

最新推荐文章于 2024-05-11 00:59:19 发布
最新推荐文章于 2024-05-11 00:59:19 发布
阅读量309 收藏 2
点赞数 10
文章标签： 前端 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78419762/article/details/136556888
版权
需求：vue3项目打成app

        

实现：

使用HBuildeX创建5+app项目，然后删除

并将vue3打包出来的dist文件夹中的

全部内容复制到5+app项目中；然后用

配置完毕后进行打包

遇到的坑：

1、打出来的app连不上后端

使用app在真机上安装完成后，进入首页后登录时遇到了连不上后端api的问题，在处理完跨域的问题后，发现因为发布app时 vue开发模式下配置的跨域是无效的，打包后会找不到接口

如图，应该在

api中写明；

参考资料：浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑_vue.js_脚本之家

踏入两次河流
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3中 打包成apk(android)
qq_35191010的博客
04-23 4893
vue3 打包成 android apk
hbuildx打包 vue3项目成apk
qq_26730215的博客
01-19 909
使用npm run build打包vue3项目，使用hbuildx打开项目目录下的dist目录。 在dist目录下加入manifest.json文件，可先用hbuildx新建h5+app项目，把项目下的manifest.json文件复制进去。 由于用vue3+ts开发时使用浏览器开发，可先使用mumu模拟器启动测试下， 云打包，一天只能打包5次 使用测试证书打包， 如要打正式包需 在jdk的bin下 cmd命令： keytool -genkey -alias...
2024年vue项目如何打包以及如何变成android、ios应用程序(1)，今日头条前端社招面试
最新发布
2301_76278747的博客
05-11 808
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】2. webpack配置在中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:publicPath: “./”,// 需要配置 否则打包后的apk文件安装在手机可能白屏。
vite+vue创建前端项目，通过HBuilderX打包为移动端app
u012627725的博客
01-01 4195
记录vite+vue创建前端项目及HBuilderX打包过程。
使用vite创建一个自己的前端开发sdk包
jack19982101的博客
12-14 2925
使用vite创建一个自己的前端开发SDK包
vue项目打包APP
weixin_73676038的博客
06-28 270
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
vue3+vite创建项目-（傻瓜式教程）
01-19
本教程将指导你如何使用Vue3和Vite创建一个新的项目，让你轻松入门Vue3的世界。 1. 安装Vite 首先，确保你已经安装了Node.js和npm。在命令行中运行以下命令全局安装Vite： ```bash npm install -g create-vite ```...
vite+vue3动态模块化导入并使用pinia
03-25
6. **构建和部署**：使用`vite build`命令可以将项目打包到`dist`目录，然后将此目录部署到服务器以供生产环境使用。 通过这样的结构，开发者可以在Vue3和Vite的现代化开发环境中充分利用Pinia进行状态管理，实现...
learn-agenda:学习Vue 3 + Vite + TailwindCSS的概念和实现
04-14
在本项目"learn-agenda"中，我们主要探讨的是如何使用Vue 3、Vite和TailwindCSS这三种前沿技术来构建一个现代化的前端应用。Vue 3是Vue.js框架的最新版本，提供了许多性能优化和开发体验改进；Vite是由Vue.js作者尤...
hello-vue3-vite
04-09
在"hello-vue3-vite"项目中，我们可以看到开发者正在探索和实践Vue 3与Vite的结合使用。Vite与Vue 3的组合可以充分发挥两者的优势，为开发者提供更流畅的开发体验。 1. **Vite的基本使用**：Vite的安装可以通过npm...
vue3-vite最基础的vue3文件夹
03-21
- **预构建优化**：Vite 提供了预构建命令，可以将项目打包成传统生产环境可用的格式。 - **插件体系**：Vite 具有强大的插件系统，可以方便地扩展功能。 3. **创建 Vue3-Vite 项目** 首先确保安装了 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 本地
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6215
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
都随它大小便吧
10-10 1235
最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作，还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度等。前端这里还没试过这样的操作，于是面向谷歌/百度开发一下。嗯，原来有这种操作的，真是流批，在此记录一下这个解决方案。
vue项目中webpack打包后app.js代码解析
weixin_42722914的博客
01-18 1916
(function (modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { /******/ var chunkIds = data[0]; /******/ var moreModules = data[1]; /******/ var executeModules = data[2]; /***
Vue项目打包App步骤
kangkang212916的博客
06-10 870
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
vue打包为App手摸手教你
技术前端，忠于热爱 @0.活在风浪里
11-27 4440
一、修改请求静态资源的路径 打开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(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的移动端项目打包成手机的app软件apk格式的。hbuilderx 云打包。
qq_54753561的博客
08-28 2167
怎么将vue的移动端项目打包成手机的app软件apk格式的。hbuilderx 云打包。打包app严选商城软件，里面有加入购物车，登陆，添加地址，三级联动。是用vue3+vant写的。写的博客不复杂跟着做一下总能学到。写给我亲爱的粉丝谢谢支持..................
vite+vue3+ts 的项目增加electron打包成exe
05-19
将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序需要进行以下步骤： 1. 安装 Electron：使用 npm 安装 Electron，可以通过以下命令进行安装： ``` npm install electron --save-dev ``` 2. 创建主进程文件：在根目录下创建一个名为 `electron.js` 的文件，并在其中编写 Electron 的主进程代码。 3. 修改 `package.json` 文件：将 `main` 属性的值设置为 `electron.js` 文件的路径，如下所示： ``` { "name": "your-app", "version": "0.0.1", "main": "electron.js", ... } ``` 4. 构建应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目构建成可在 Electron 中运行的应用程序。 ``` npm run build ``` 5. 打包应用程序：使用 Electron Builder 打包应用程序，可以使用以下命令进行安装： ``` npm install electron-builder --save-dev ``` 然后，在 `package.json` 文件中添加以下代码： ``` { "build": { "appId": "your.app.id", "productName": "Your App Name", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "electron.js", "node_modules/**/*" ], "extraFiles": [ "assets/**/*" ], "mac": { "category": "your.app.category.type" }, "win": { "target": "nsis" } } } ``` 6. 打包应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目打包成可执行文件。 ``` npm run electron:build ``` 以上步骤是将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序的基本步骤。根据自己的实际需求，可以进行一些额外的配置和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值