uniapp项目中打包成PC-Web或者H5需要注意点

已于 2024-01-06 19:51:40 修改
阅读量1.6k 收藏 10
点赞数 10
文章标签： 前端 uni-app javascript node.js html5
于 2024-01-06 19:47:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yukuleshui/article/details/135431009
版权

uni-app项目在HbuilderX中打包成PC-Web或H5需要注意：

1.在manifest.js中指定appid，https://dev.dcloud.net.cn中自己账号下的应用appid，

 "appid" : "__UNI__XXXXX",//如果不指定，打包H5会失败

2.在auth.js中指定访问后端的地址或是域名

baseURL: `http://10.10.10.66:8080/prod-api`,
localURL: `http://10.10.10.66:8080`,
土木桩
关注
uniapp开发，打包成H5部署到服务器
weixin_48596030的博客
12-13 4万+
uniapp开发，打包成H5部署到服务器
uni-app - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的示例代码
王二红
03-21 4507
uniappH5项目如何将配置文件不参与打包，uniappH5网站怎么让外部有个配置文件能修改，uniappH5打包后怎么修改配置呢，uniapp打包h5后自定义配置文件可修改，uniapp打包成H5后,怎么直接修改static中的文件中的config.js即可,无需重复打包，uniappH5每次修改配置都需要重新打包？uniapp项目打包H5后希望可以修改固定的配置，uniapph5项目打包后修改不方便有没有一个配置文件能不被打包，uniappH5网站每次打包后都会把配置文件给弄消失怎么办，
uniapp+Html5端实现PC端适配
11-19
前言： 使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没upx好使； 后来百度好久，发现都没有解决办法，偶然间突发奇想，能不能利用iframe在页面载入前将宽度设置为375px(750upx)，来达到欺骗浏览器，欺骗uniapp，让浏览器以375px(这个值可以自己按需设置)基准值来计算upx=>px转换比，然后setimeout 300毫秒（延迟时间自己试验吧，不一定300ms效果最好）将i
uni-app h5平台在电脑浏览器打开解决方案
热门推荐
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
01-12 2万+
本篇文章教大家的方法是使用 的方式来实现的，目前官方也增加了PC端的适配，其他的优秀博主也有相关的设置页面最大宽度的方法。但是限制宽度并不是重点，页面上弹窗，定位布局，移动事件，支付都是存在兼容问题的。
uni-app 多端开发
最新发布
yolo
04-20 1031
uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp宽屏开发PC端方案，及衍生问题解决
F2691898750的博客
03-06 1万+
需要在uniapp的pages.json文件中配置正常电脑没有高于3840像素宽的，这个程度就足以； 在使用时，只要正常的按照1920/750 = 2.56的比例，在HBuliderX中进行比例配置，使用时进行px转化rpx即可。问题一、pc端字体过大问题二、字体大小固定：问题三、如何同时适配PC与移动端？解决思路：由于PC的根元素必须是因此要么pc和移动端都在page-meta的规则下使用v-if进行判断渲染，判断当前的设备是移动端或pc端，然后渲参考rem处
【学习笔记】【保姆级】uniapp将项目打包成H5或web，通过flask实现发布
2202_75832991的博客
08-14 3569
在uniapp写完项目后，很多小伙伴就在想，自己做的这东西怎么才能让大家访问到呢🤔办法很多，编译成小程序，通过微信开放平台发布，发布成apk，发布成app上架到应用商店等等，但是这些方法都比较麻烦😭😭😭今天来讲一个比较简单的——打包成网页版，通过flask发布（低代码量，步骤少）
uniapp打包H5-pc-web
weixin_73251435的博客
06-22 668
3.需要填写HBuilder X的账号和密码确认个人信息，没有的话就先去注册一个。X找到 发行选择网站-PC Web或手机H5。2.填写网站标题，网站的域名。
uni-app使用HBuilderX打包Web项目
weixin_45067120的博客
01-19 2098
一、找到manifest.json配置Web配置。打包成功，点击地址获取文件。
uniapp无法打包H5
Yui_NIE的博客
04-01 1670
HBuilder 回退版本到3.8以下就解决了。发现是版本更新导致的。
uni-app条件编译和网页打包
cozy666的博客
05-13 368
在项目打包时，存在打包微信小程序、h5网页端或者其他平台小程序的情况，但是有些api是某些小程序中特有的，例如wx.requestPayment()，微信支付、授权等功能。在打包网页端时会出现路径问题，需要在manifest.json中配置，改为相对路径。需要注意以wx开头的api，以及open-type，这是小程序中特有的。这时，若不做条件编译，打包成非微信小程序的项目则会报错。针对这一问题，需要使用#ifdef将特殊代码进行包裹。
【uni-app系列】uni-app之快速搭建框架_uniapp项目框架搭建
2401_84520271的博客
04-21 1463
分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
uni - app 打包（H5，小程序，APP）
qq_25906119的博客
02-02 1679
uni-app ，H5端，小程序端，APP端打包
UniApp 打包项目为桌面端 exe 文件
qq_42072014的博客
07-26 3262
通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。这样，你的应用程序就可以在 Windows 平台上运行，为用户提供更加丰富的用户体验。UniApp 的强大之处在于它的跨平台能力，而将其扩展到桌面端则进一步拓宽了它的应用场景。如果你已经有了一个 UniApp 项目，确保它已经包含了你需要的所有功能。打包完成后，你会在项目的。目录下创建相应的文件。
uniapp 打包 H5 实现在 uniapp 打包 APP 的 webview 通信
Brod-Roy的博客
06-21 3237
本文解决 uniapp 打包的 APP 在 webview 内嵌入 uniapp 打包的 H5 页面的需求，并实现通信。
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
wwppp987的博客
03-03 5830
实现目标：uniapp一套式制作pc端、pad端、手机端。符合国家等保二级标准。伸手党福利-带前端gitee
uniapp项目实践总结(二十三)网页和小程序应用打包教程
Guan'Blog
09-26 444
以上就是应用打包到网页、小程序的主要内容，有不足之处，请多多指正。
uniapp h5打包
03-13
### 使用 UniApp 进行 H5 打包的教程和配置方法 #### 1. 设置 AppID 在项目根目录下的 `manifest.json` 文件中，找到并设置项目的 **AppID**。需要注意的是，该 AppID 是整个项目的唯一标识符，而不是团队成员个人的 AppID[^1]。 #### 2. 路由模式配置 默认情况下，UniApp 的路由模式为 hash 模式（即 URL 中带有 `#` 符号）。如果需要更友好的路径结构，可以切换到 history 模式。 修改方式如下： 打开 `pages.json` 文件，在全局配置部分添加以下字段： ```json { "globalStyle": { "navigateStyle": "history" } } ``` 此操作会启用 HTML5 History 模式的路由支持[^2]。 > 注意：当使用 history 模式时，服务器端需配合进行重写规则配置，否则可能会出现页面刷新后 404 错误的情况。 #### 3. 打包流程 ##### (1) CLI 工具打包 通过命令行工具完成 H5 打包，具体步骤如下： 安装依赖环境后运行以下命令： ```bash npm run build:h5 ``` 如果遇到错误提示 “找不到接受实际参数‘--platform’的位置形式参数”，可能是由于版本兼容问题引起的，请确认当前使用的 CLI 版本是否最新。 ##### (2) HBuilderX 图形化界面打包 对于不熟悉命令行操作的开发者，可以直接利用官方 IDE —— HBuilderX 完成打包工作： 进入菜单栏中的「发行」选项卡 -> 「网站-PC 或 H5...」-> 填写必要的发布信息 -> 单击「发行」按钮即可生成目标文件夹。 #### 4. Nginx 部署与路径配置 为了使打包后的静态资源能够正常访问，通常会选择将其托管至 Web 服务程序上，比如 Nginx。以下是基于 Nginx 的典型配置案例： 编辑站点对应的虚拟主机配置文件，增加如下内容： ```nginx location /h5/ { alias /www/data/html/h5/; try_files $uri $uri/ /index.html; index index.html index.htm; } ``` 上述片段定义了一个名为 `/h5/` 的子路径映射关系，并确保即使请求不存在的具体文件也能回退加载首页入口文件 `index.html`[^3]。 --- ### 示例代码展示 假设我们有一个简单的 Vue 组件用于测试功能，则其可能的内容如下所示： ```vue <template> <div id="app"> Hello, this is a test page. </div> </template> <script> export default { name: 'TestPage', }; </script> ``` 执行完以上全部步骤之后，您应该已经成功完成了从开发调试直至上线部署的一整套过程！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值