uniapp开发打包成H5部署到服务器的详细步骤

前端使用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部署到服务器的文章就介绍到这了,更多相关uniapp打包成h5内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用uniapp开发APP时的调试/安卓打包等详解

    目录 一.调试 二.打包 总结 一.调试 1.先用数据线连接电脑和手机,选择“文件传输”, 2.打开开发者模式,华为手机举列-->设置-->关于手机-->版本号,多次连续点击“版本号”,就会提示已打开 开发者模式 3.华为手机举列-->设置-->系统和更新-->开发人员选项-->打开 USB调试,进入调试模式 4.在Hbuild中打开项目,选择 运行-->运行到手机或模拟器,当前使用uniapp开发的APP就可以运行到手机了 注:第一次运行时会自动给手机下载

  • uniapp打包成微信小程序的详细过程

    uniapp打包成微信小程序的详细过程

    目录 一.HbuilderX打包 二.发行 三.打开小程序体验 注意 总结 一.HbuilderX打包 选中项目-点击发行(U)- 小程序-(微信仅适用于uniapp)(W) 二.发行 填写微信小程序Appid 点击发行,项目会进行编译,等待编译完成,会提示前往小程序上传 前往小程序开发工具打开这个小程序 然后提示上传成功 三.打开小程序体验 这是你的第一个版本,点击蓝色的体验,会有一个二维码,用自己的账号体验,让别人体验的话,要先把对方加入到开发者中. 接下来就是根据提示,填写信息,然后等待审

  • uniapp打包安卓App的两种方式(云打包、本地打包)方法详解

    在HBuilder上对APP提供了两种打包方式,云打包和本地打包,下面主要对这两种打包方式做个介绍 两者的区别:云打包相对简单,但是每天最多只能打包五次,而且在高峰期打包时间可能会很长,本地打包相对比较复杂,但是不限制次数,打包时间也短 一. uniapp云打包安卓App: 只需要设置相应参数即可.比较复杂的地方可能就是证书,如果你是测试包,Android的话直接选择共用证书即可,ios则需要申请相应证书,申请证书的具体方法官方也介绍的很清楚了,就不赘述了. 二. uniapp本地打包安卓App

  • uniapp开发打包多端应用完整方法指南

    一.uni-app项目介绍 用uni-app开发多端项目,一套代码可同时打包出各端小程序.h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目,下面示例项目采用 HBuilderX可视化界面 的方式创建,cli项目可参考uni文档,大部分流程都是通用的. 项目结构: ├── components 公用组件 ├── libs 公共方法 ├── pages 页面 ├── static 本地静态资源,注意:静态资源只能存放于此 ├── stor

  • uniapp项目打包为桌面应用的方法步骤

    uniapp项目打包为桌面应用的方法步骤

    安装electron cnpm install electron -g 安装electron-packager cnpm install electron-packager -g uniapp的manifest.json修改 H5打包 H5文件夹下新建package.json和main.js 新建package.json { "name" : "app-name", "version" : "0.1.0", "mai

  • uniapp开发打包成H5部署到服务器的详细步骤

    前端使用uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上.这样通过服务器链接地址,直接可以在手机上点开来访问. 打包全步骤如下: 一.点击菜单栏“发行”,点击选择“网站-PC Web或手机H5”, 二.填写网站标题和网站域名/服务器的IP地址.(这个地址是将项目打包之后存放静态文件的地址) 三.点击进入manifest.json的h5配置里,根据自己的情况配置一些信息.一定要注意配置 “运行的基础路径”,如果出现空白页面或者静态文件404的情况,可能是因为这个路径没

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

  • vue项目打包后部署到服务器的详细步骤

    vue项目打包后部署到服务器的详细步骤

    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2

  • 将VUE项目部署到服务器的详细步骤

    将VUE项目部署到服务器的详细步骤

    目录 一.idea中vue项目的打包 1.设置打包后项目的名称 2.将项目打包 3.生成的包内的文件如下: 二.部署到服务器 1.找到Nginx的安装位置 2. 将打包后的vue项目文件放在html文件架下面 3.将打包后的文件夹上传至html文件夹 4.配置打开页面的路径 三.用IP地址访问 总结 宝塔面板上操作 一.idea中vue项目的打包 1.设置打包后项目的名称 publicPath:process.env.NODE_ENV === 'production' ? '/back/' :'

  • vue-cli3项目打包后自动化部署到服务器的方法

    一.安装 scp2 npm install scp2 --save-dev 二.写好脚本 例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',

  • spring boot项目打包成war在tomcat运行的全步骤

    前言 使用maven创建的springboot项目,默认是jar包,springboot还有自己带的tomcat.现在需要将项目打包,并部署到服务器tomcat下面. 下面就让我们来一起把spring-boot项目按照平常的web项目一样发布到tomcat容器下,下面话不多说了,来一起看看详细的介绍吧 一.修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二.移除嵌入式tomcat插件 在pom.xml里找到spring-boot-star

  • IDEA 2020 配置Tomcat服务器的详细步骤

    IDEA 2020 配置Tomcat的步骤如下所示: 第一步 下载Tomcat 官网链接:http://tomcat.apache.org/ 选择download,找到自己所要的版本,下载对应版本的Tomcat. 跟我之前的文章一样,我依旧推荐下载免安装的压缩包. 有zip和exe两种格式的,zip(64-bit Windows zip(pgp,md5,sha1))是免安装版的,exe(32-bit/64-bit Windows Service installer(pgp,md5,sha1))是

  • Jenkins部署war包和部署jar包的详细步骤

    零.配置Tomcat 默认情况下Tomcat是没有配置用户角色权限的 但是,后续Jenkins部署项目到Tomcat服务器,需要用到Tomcat的用户,所以修改tomcat以下配置, 添加用户及权限 vi /opt/tomcat/conf/tomcat-users.xml # 内容如下: <role rolename="tomcat"/> <role rolename="role1"/> <role rolename="man

  • TypeScript环境搭建并且部署到VSCode的详细步骤

    TypeScript环境搭建并且部署到VSCode的详细步骤

    目录 TypeScript环境搭建 第一步:下载淘宝镜像 第二步:下载TypeScript 部署到VSCode 先创建一个文件夹tsDemo, 修改tsconfig.json配置 可能会遇到的报错 前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node环境.要是都有了的话,那么接下来,往下看. TypeScript环境搭建 第一步:下载淘宝镜像 先检查自己有没有成功安装npm 有npm还不行,还要下载cnpm,命令如下(直接复制粘贴): npm install

随机推荐