uniapp打包为H5并且在本地运行

已于 2023-05-26 15:42:43 修改
阅读量4.2k 收藏 14
点赞数
文章标签： uni-app vue.js 前端 javascript
于 2023-05-24 14:59:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44871531/article/details/130847012
版权

首先记录一下一个便捷操作

在文件夹目录下,输入cmd,回车可直接打开终端,并定位到该目录

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.首先打包成H5
在这里插入图片描述

或者
发行为下面
在这里插入图片描述

这些东西可以不用填
在这里插入图片描述

2.找到项目的根目录
在这里插入图片描述

3.全局安装npm install http-server -g
在这里插入图片描述

4.进入打包目录
在这里插入图片描述

5.运行终端:http-server
在这里插入图片描述

6.游览器输入网址即可

蜡笔大杺
关注
uniapp打包为H5部署到Nginx图片无法自适应的解决方法
邓邓子的博客
12-23 1669
问题描述：uniapp打包为H5部署到Nginx后，图片无法自适应，页面显示很乱。 开始以为是代码或uniapp配置的问题，搞了半天！最后从Nginx找到了原因！ 解决方法： nginx.conf文件加上一行： include mime.types; ...
uniapp上线——打包H5
尽力漂亮的博客
01-19 887
文章目录效果打包前准备发行部署到tomcat测试注意外网访问云服务需要开安全组+windows内置高级防火墙的入站规则：8083端口 效果 打包前准备 1.找到manifest.json.如图 2.注意改端口 发行 就发行完成了， 本地测试 浏览器输入这个网站 打包成功，访问后台的数据显示 部署到tomcat 把打包的文件放到tomcat的webapps下 更改下tomcat的端口 启动tomcat： 测试 注意外网访问云服务需要开安全组+windows内置高级防火墙的入站规则：
uni-app项目打包成H5部署到服务器
最新发布
qq_36158551的博客
08-02 4572
前端使用 uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。这样通过服务器链接地址，直接可以在手机上点开来访问。将项目打包成H5部署到服务器，然后链接地址使用uni-app或者android的项目的web组件引用，可实现多项目的数据融合。
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
uniapp打包为H5后怎样在本地运行
qq_45942606的博客
11-23 7020
1.先完成H5相关配置 2.点击对应的H5网页发行 3.点击发行 4.发行后在控制台就会看到如下界面，点击箭头指引的地方 5.就会进入到下面，但此时在本地浏览器打开不了的 6.先在该项目的终端全局安装 npm install http-server -g 7.然后进入H5文件夹的终端，输入http-server 8.然后在本地浏览器中输入上面图片红圈地址就可以了 ...
【uniapp】uniapp打包H5（网页端）：
SunPeng的博客
08-10 5558
【uniapp】uniapp打包H5（网页端）：
uniapp项目打包发布H5本地预览
weixin_53339757的博客
01-04 3640
uniapp项目打包H5本地预览
uniapp打包成H5
niuniu2878499107的博客
06-13 1476
uniapp打包成H5页面
uniapp打包成h5怎么去掉链接里的#？
impossible1994727的博客
12-14 4547
看上图 本地项目中要含有template.h5.html文件，打开manifest.json，选择h5配置，按照图中填写，保存。 最后选择发行——网站（H5手机版）
uniapp打包成H5部署到服务器教程
w_0217的博客
07-26 782
uniapp打包成H5部署到服务器教程 1：点击菜单栏发行，点击选择网站-H5手机版， 2.进入到manifest.json的h5配置里面，根据自己的情况配置一些信息，我这里是默认的，一定要注意配置运行时候的基础路径（下图红色框标记的地方），如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 3.在网站域名这一栏填写，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址） 4：点击发行，控制台会自动
uni - app 打包（H5，小程序，APP）
qq_25906119的博客
02-02 1567
uni-app ，H5端，小程序端，APP端打包
uniapp 打包上线 （H5）
weixin_45449154的博客
09-23 267
原文地址：https://blog.csdn.net/weixin_42332641/article/details/115344806
uniapp开发，打包成H5部署到服务器
热门推荐
maoge_666的博客
04-14 1万+
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。 这样通过服务器链接地址，直接可以在手机上点开来访问。
uniapp打包H5，小程序问题解决,搭建本地服务器跑h5页面
qq_23022703的博客
08-14 1619
uniapp打包H5，小程序问题解决,搭建本地服务器跑h5页面1.打包h52.打包小程序 1.打包h5 运行–H5手机版 域名填写上线时网站域名，标题填写网页标题 运行路径为服务器自定义文件，不带域名，从根目录开始 打包成功如下图 打包成功后找到下图的static和index.html 搭建本地服务器测试打包好的H5代码 node.js搭建本地服务器 const express=require('express') const app=express() app.use(express.sta
uniapp开发微信小程序打包成h5部署
Liw_J的博客
03-21 2407
需要打包成功之后，会在unpackage页面生成的dist文件夹中多一个Build文件，里面包含h5页面。需要部署的话就把h5页面打包部署即可。需要自己uniapp的appId。此appid是uniapp的appid，非微信小程序给的appid。默认生成的打包链接，静态资源访问的路径是“/static/css”，项目要求前缀添加/mnapp。项目使用uniapp以vue2开发小程序，开发完成之后打包h5部署，包含修改静态资源路径。：打包方式(点击发行 -> 点击网站-PC)
uniapp中h5打包记录下（部署到本地）
weixin_45803990的博客
12-30 3435
前提先配置好要发行的h5基本设置 选择manifest.json、点击h5配置。 一定要看清运行的基础路径，假如路径写的是packedpath,打包后你要新建一个名为packedpath的文件夹，然后把打包后的文件夹放进去，才OK。但是要写的是相对路径 ./ 就没事了。 1、选中项目，选择导航栏的发行，发行下的网站h5手机版。然后下一步。 2、填写网站标题和域名、点击发行（部署到本地域名没填写） 3、等待终端提示打包完成（ctrl+` 即可打开终端），点击这个路径即可找到打包好的文件一个st
uniapp 打包 H5 实现在 uniapp 打包 APP 的 webview 通信
Brod-Roy的博客
06-21 2468
本文解决 uniapp 打包的 APP 在 webview 内嵌入 uniapp 打包的 H5 页面的需求，并实现通信。
uni-app开发打包成H5部署到服务器的详细步骤
qq_38937194的博客
06-26 2513
一、点击菜单栏“发行”，点击选择“网站-PC Web或手机H5”， 二、填写网站标题和网站域名/服务器的IP地址，此地址是将项目打包之后存放静态文件的地址 三、点击进入manifest.json的h5配置里，根据自己的情况配置一些信息。一定要注意配置 “运行的基础路径”，如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 四、点击发行，控制台会自动编译。出现以下提示，说明编译成功：该地址就是打包后存在资源的位置 五、将已经打包好的静态页面了，直接把
将uniapp打包成h5后用cordova打包
07-13
你可以按照以下步骤将uniapp打包成H5，并使用Cordova进行打包： 1. 首先，将uniapp项目编译为H5版本。在你的uniapp项目根目录下，运行以下命令： ``` npm run build:h5 ``` 这将生成一个dist目录，其中包含了H5版本的代码。 2. 创建一个Cordova项目。在你的工作目录下，运行以下命令： ``` cordova create <your_project_name> ``` 这将创建一个新的Cordova项目文件夹。 3. 进入Cordova项目文件夹，并添加H5平台。运行以下命令： ``` cd <your_project_name> cordova platform add browser ``` 这将添加一个名为browser的平台，用于打包H5版本。 4. 将H5版本的代码复制到Cordova项目的www目录下。运行以下命令： ``` cp -R <uniapp_project_path>/dist/* www/ ``` 其中，`<uniapp_project_path>`是你的uniapp项目的路径。 5. 运行Cordova项目。运行以下命令： ``` cordova run browser ``` 这将在浏览器中运行你的Cordova项目，并将uniapp的H5版本显示出来。 注意：在使用Cordova打包之前，请确保已经正确配置了Cordova环境，并安装了所需的插件和平台。 希望以上步骤对你有帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值