使用 uni-app 打包 H5

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量1w 收藏 38
点赞数 9
分类专栏： uni-app h5 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50339217/article/details/125260027
版权

1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径， 将路径修改为 相对路径（./ ）

 

2. 修改完后，点击工具栏 --- 发行 --- 网站pc web或手机 h5

 

3. 弹出弹窗，修改网站标题与网站域名（网站域名取对应项目的域名，一般为https/http开头）填完后直接点击发行。

4. 点击发行后如图

5. 发行成功后，找到 unpackage --- dist --- build --- h5 文件夹， 在外部资源中打开，将 h5 文件夹打包成 zip 格式，然后给到运维，运维会帮忙发布到服务器，发布成功后，运维会给你一个属于 h5 项目的域名 https://xxxx.xxx.com/app/  拿取H5域名去拼接页面，就能在浏览器中打开对应的页面了。 （ https://xxxx.xxx.com/app/#/pages/index/index ）

 

雁 南飞
关注
  • 9
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app - 最新实现将 uniapp 项目打包编译为 H5 网站，并上传部署到 web 服务器进行发布预览（从打包到发布完整流程步骤，Hbuilder 编译打包 h5 发行到 web 服务器）
王佳斌
03-06 1万+
uniapp，打包h5，打包编译H5网站，怎么打包h5，uniapp打包成H5部署到服务器教程，uniapp打包H5页面发布到服务器，uniapp开发,打包成H5部署到服务器_uniapp 打包h5，uniapp如何打包h5项目，怎么把项目打包成H5，uniapp如何打包成H5并且放到web端上，打包成h5部署到服务器的步骤，打包发行到h5报错怎么办，如何将uniapp打包的h5网站放到服务器上，编译打包后怎么放到web服务器中，如何将uniapp开发的H5打包并部署到服务器，部署使用uniapp开发的h5
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
uniapp开发，打包成H5部署到服务器
热门推荐
weixin_48596030的博客
12-13 3万+
uniapp开发，打包成H5部署到服务器
uniapp(vue3) H5页面连接打印机并打印
qq_26711723的博客
03-22 764
三、运行代码调用浏览器打印，主要使用的是window.print()功能。下面使用的是基于ifream的，这样可以控制到具体打印范围，全屏打印可以考虑不用。（原理应该就是打印机打印PDF）一、找到对应厂商打印机的驱动并在windows上面安装。查看是否安装完成可以在：控制面板->查看设备和打印机，找到对应打印机驱动是否安装完成。四、打印样式不全或者其他，可以考虑设置打印格式 或者 代码样式调整。二、打印机USB连接电脑。
uniApp 打包H5工程 超详细（打包-实现跨域-nignx配置）
qq_20236937的博客
04-18 1万+
参考文献： https://zhuanlan.zhihu.com/p/158100556 https://www.csdn.net/tags/MtTaEgxsNDk5OTAxLWJsb2cO0O0O.html https://www.jb51.net/article/180961.htm 打包步骤 当前端uniapp写的项目开发完成的时候，需要将页面打包出来，生成H5的静态文件，部署在服务器上，通过服务器链接地址，就可以直接在手机上点开访问 了。 在网上看了一圈，好像没有找到十分详细的教程，这里稍微详细的记
uni-app搭建h5项目
Sunshinedada的博客
02-21 978
5. 打包试一下看看能不能放到nginx以及服务器上去。打包没问题之后再开发页面。运行即可，生成的路径在浏览器中可以打开，说明打出来的包可以在服务器中用。二、找到使用vue-cli命令行，按照文档上的步骤进行搭建。3）cmd切换到打包过的项目的目录地址。打包之后出现一下dist文件。2）查看是否下载完成。
uniApp h5项目通过命令行打包，并生成指定路径、文件名称
qq_43371595的博客
05-06 9872
需求：想要自动化部署uni项目，平常的uni项目是通过可视化构建，导致我们的自动部署成了半自动，非常不爽，于是就找到了下面这种方法 首先，用hb新建一个项目 然后，通过cli新建一个项目 文档 vue create -p dcloudio/uni-preset-vue my-project 可以先运行下cli的项目，可能会有一些问题， Error: Cannot find module ‘webpack/lib/RuleSet‘ 这种报错，两种可能性 1、降低cli版本 npm uninstall -g
uniapp打包成h5页面
couch potato的博客
03-20 6748
1、manifest.json中修改h5配置，运行的基础路径设置为 ./ 表示相对路径 2、hbuilderx上方按钮，点击发行，选择“网站-pc web 或手机h5”，按流程操作，打包后的h5目录会显示在控制台中 3、uniapp项目必须经过发行打包才可以部署在Nginx上 4、客户端获取cookie的某个字段为null，需要后台排查http-only，为true时客户端无法获取，为false时客户端，可通过document. cookie方式获取 ...
uniapp 使用命令行创建项目及使用命令行打包H5 以及使用HBuilder X创建的老项目升级为可使用命令行打包的项目
zhuxichong123的博客
07-06 6200
13.再运行，终于不报错了，但是 ，项目中使用的 uni-simple-router和uni-read-pages来封装的路由器拦截失效了 纠其原因， uni-simple-router在vue-cli版本中 需要添加额外的配置项。这个bug是真坑~ 小小吐槽一下。9.老项目里的vue.config.js要拿出来 放到根目录下面来，老项目安装的一下依赖 需要在新项目重新安装，复制老项目下的package.json的依赖到新项目下 的package.json里，然后重新执行npm install。
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板 官网地址 平台兼容说明 模板说明： 基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理 状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器中失去代码静态追踪和提示“”使用方式可参考： 模板为了轻量化只保留了常用的组件，需要其他组件自行添加，，这里不推荐使用除官方外的扩展组件，因为打包成多端可能会有兼容问题，所以我习惯自己写，这样代码会更少 已经配置好在manifest.json文件中h5端请求代理，不需要可剔除 预装了sass，部分注意事项请看uni.scss代码注释 注意：vue.config.js 中配置的 css.loaderOptions 是无法在当前项目生效的，可能是uni-app项目设定和标准vue-cli项目设定不一样导致的，需要在uni.scss文件全局引入即可，具体看代码 目录说明
uni-app-barcode:uni-app 条形码生成器
05-12
支持H5、微信小程序、APP，其它平台的没有测试 使用canvas生成 不懂如何使用可以去直接打包下载运行 说明 此条形码组件的条形码生成部分移植改造自，精简了代码，移除无效属性，增加了点新属性，使其能够在uni-app中...
uQRCode:uni-app 二维码生成插件
08-04
已测试H5、微信小程序、iPhoneXsMax真机。 支持自定义二维码渲染规则，可通过 getModules 方法得到矩阵信息后，自行实现canvas渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等，详情见示例中的 custom。 ...
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 471
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 630
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 678
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 847
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 424
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
uniapp h5 项目能使用scollite吗
07-17
是的，你可以在uni-app的H5项目中使用Scollite。Scollite是一个用于实现视差滚动效果的JavaScript库，可以在网页中创建各种吸引人的滚动效果。 要在uni-app的H5项目中使用Scollite，可以按照以下步骤进行操作： 1. 在uni-app的H5项目中，安装Scollite。你可以通过npm来安装Scollite： ```bash npm installollite --save ``` 2. 在需要使用Scollite的页面中，引入Scollite的相关代码。你可以在页面的`<script>`标签中添加以下代码： ```javascript import Scollite from 'scollite'; export default { mounted() { const scollite = new Scollite('.your-element', { // Scollite的配置选项 }); scollite.init(); } } ``` 在上述代码中，你需要将 `.your-element` 替换为需要应用Scollite效果的元素选择器。你还可以根据需要配置Scollite的其他选项。 3. 在页面的`<template>`标签中，将Scollite效果应用到对应的元素。示例代码如下： ```html <template> <div class="your-element"> <!-- 内容 --> </div> </template> ``` 在上述代码中，你需要将 `.your-element` 替换为与上面脚本中相同的选择器。 4. 根据Scollite的文档和示例，配置和定制你想要的视差滚动效果。 通过以上步骤，你就可以在uni-app的H5项目中成功使用Scollite实现视差滚动效果了。记得在页面渲染完成时调用 `scollite.init()` 方法来初始化Scollite。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值