uniapp开发，打包成H5部署到服务器

哈喽大家好~我是马小跳。一名进阶中的程序媛。

在这里记录下自己成长的每一次进步，希望遇到志同道合的猿友

一起努力，一起把技术up up up！！！

前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。
这样通过服务器链接地址，直接可以在手机上点开来访问。

打包全步骤如下：
一、点击菜单栏“发行”，点击选择“网站-PC Web或手机H5”，

二、填写网站标题和网站域名/服务器的IP地址。
（这个地址是将项目打包之后存放静态文件的地址)

三、点击进入manifest.json的h5配置里，根据自己的情况配置一些信息。
一定要注意配置 “运行的基础路径”，如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。

四、点击发行，控制台会自动编译。出现以下提示，说明编译成功：

五、点击上图中的红框部分，就能看到已经打包好的静态页面了。（直接把这个h5文件压缩一下，发给后端就可以了）

如需要自己上传到服务器上，可继续以下步骤。
六、先拿到服务器的地址信息，找一个工具，连接上该项目的服务器，进入到服务器的根目录底下。
我这里用的是ftp工具。在根目录底下新建一个aofan文件夹，然后将上图中的static文件夹和index.html复制进去即可。
OK，这个时候就已经部署成功了。

七、打开浏览器，输入服务器ip地址，访问一下index.html的内容即可。

注意点：这三个地方的路径名称一定要一致。
1：打包时候的配置的运行的基础路径
2：服务器根目录底下存放静态文件static和index.html
3：浏览器里面访问的路径

uniapp开发，打包成H5部署到服务器相关推荐

uni-app项目打包成H5部署到服务器(超详细步骤)
咳咳, 第一次写博客, 有点激动, 昨天get了一个新技能, 也是我之前一直最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目到测试服务器, 成功之后很开心, 后面又自己 ...
将uniapp打包成h5放在安卓webview中（解决uniapp引入第三方地图卡顿问题）
本来是使用uniapp进行开发,然后打包成安卓软件的,因为是用了地图模块(基于天地图),因为uniapp框架的限制,只能使用webview组件引入地图文件,然后出现一个问题,发现地图在浏览器中打开很流 ...
uni-app开发APP和H5，分享功能
App app分享以后一定是在H5页面进行查看的若开发语言是uni-app的话可以在插件市场 APP分享.微博分享.QQ分享.微信好友.朋友圈 - DCloud 插件市场 // #ifdef APP ...
uniapp-怎么把项目打包成H5
如果没有项目的话就自己创建项目uni-app 创建完项目我们会得到一个uniapp框架,可以往里面添加属于自己的功能和需求但我们把需求和功能都写好,就是发布的时候,通过uniapp 我们可以发布成 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
uniapp打包成h5页面
1.manifest.json中修改h5配置,运行的基础路径设置为 ./ 表示相对路径 2.hbuilderx上方按钮,点击发行,选择"网站-pc web 或手机h5",按流程操作 ...
uniapp 打包成H5
1.在hbuilder中工具栏中找到发行->网站pc web或手机h5 一栏 2.点击进去进入h5发行 3.发行后控制台进行编译生h5包 , 4.发送给后台,让后台部署上服务器(也可以自己部署 ...
用uniapp开发打包多端应用完整指南
一.uni-app项目介绍用uni-app开发多端项目,一套代码可同时打包出各端小程序.h5和app,uni-app支持通过 HBuilderX可视化界面和 vue-cli命令行两种方式创建项目 ...
直接打包的服务器组件,Vue-CLI-2.x全家桶架构，支持打包后自动部署到服务器构建案例...
今天有时间分享一些平时自己开发上的一些构建配置,我们以Vue-CLI-2.x来构建开发环境. 好,我们先来看一下我们要做哪些工作. 现附上源码地址,https://github.com/7492643 ...

uniapp开发，打包成H5部署到服务器

哈喽大家好~我是马小跳。一名进阶中的程序媛。

在这里记录下自己成长的每一次进步，希望遇到志同道合的猿友

一起努力，一起把技术up up up！！！

uniapp开发，打包成H5部署到服务器相关推荐

最新文章

热门文章