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

这篇具有很好参考价值的文章主要介绍了uniapp开发,打包成H5部署到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

一起努力,一起把技术up up up!!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

uniapp开发,打包成H5部署到服务器文章来源地址https://www.toymoban.com/news/detail-449497.html

到了这里,关于uniapp开发,打包成H5部署到服务器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端如何将项目打包部署到服务器

      本篇文章从前端项目打包开始,逐步完成项目部署到服务器的操作,这次咱们采取的部署方案是通过vscode中Remote-SSH和SFTP两个插件实现项目部署到服务器,并在服务器上通过nginx代理将请求转发到对应的端口。   先将自己开发完成的本地项目进行打包,打包之后会产生一个

    2024年03月14日
    浏览(48)
  • 打包前后端项目并部署至服务器

    打包命令: npm run build 执行完命令后,会生成一个名为 dist 的文件夹,这个就是打包好的前端项目。 2.1、执行 maven 的 clean ,删除项目编译创建的 target 文件夹 2.2、执行 package,将项目打包至 target 文件夹下 3.1、连接服务器 3.2、在根目录创建文件夹,并上传打包好的前后端项

    2024年01月23日
    浏览(42)
  • vue打包部署到服务器,动态获取(修改)对应服务器的请求ip

    需求: vue打包后的文件要部署到不同的服务器上,ip不同,每次部署都要修改对应服务器的ip后打包上线,所以会出现频繁打包的情况 问题:vue项目打包上线不同服务器,需要打包一次能够动态的修改ip地址 思路1: 1.由于vue项目里面public文件在打包时不会被影响,所以可以在

    2024年02月05日
    浏览(30)
  • 【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(47)
  • Linux服务器Jenkins部署打包Android

    介绍 Jenkins 自动打包 Android 应用,后面介绍打包Flutter应用,然后介绍打包Android原生+Flutter混合应用 准备工作 1.jenkins服务器地址 账户密码 2.项目git地址 访问账号密码 3.ssh 链接服务器账户密码 安装Android环境 Android SDK下载 国内老版本下载地址 官网下载地址 下载到本地使用使

    2024年02月10日
    浏览(37)
  • Golang 打包go项目部署到linux服务器

    我们可以在终端中输入以下代码: 然后就会生成main-linux的二进制可执行文件,然后我们就可以将main-linux放到服务器中的任一目录中,然后我们就可以执行以下命令运行。 这是我们在网上可以搜索到的方法,但是我相信很多人通过这个方法尝试后发现,它并不能运行。我相信

    2024年02月16日
    浏览(44)
  • springboot上线打包+vuecli2部署在linux服务器上(打包上线)

    这里也是记录一下springboot的上线打包流程,我这里前端使用的是vuecli2 springboot的依赖是2.7.9的版本 前端是使用的vue2 打包前,你的linux上必须要先安装,tomcatjavanginx springboot打包点击一下,等maven编译打包成功 在target文件下找到,jar包, 然后,把jar包上传到你的linux服务器,文件夹上,我

    2024年02月10日
    浏览(37)
  • Nuxt - 项目打包部署及上线到服务器流程(SSR 服务端渲染)

    网上大部分关于 Nuxt 打包部署教程真的是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手。 本文将尽可能详细的描述,打包部署及上线到服务器完整流程。 强烈建议您打开 官方文档,与本教程对照着,这有助于您更好的理解。 您需要先了解一下 Nuxt 命令及

    2024年02月09日
    浏览(46)
  • Vue+ElementUI项目打包部署到Ubuntu服务器中

    1、修改config/index.js中的assetsPublicPath: \\\'/\\\',修改为assetsPublicPath: \\\'./\\\' 2、在build/utils.js中增加publicPath: \\\'../../\\\' 3、打开终端,在根目录下执行npm run build进行打包,打包成功后会生成dist 4、将dist传输到服务器上(我已经把dist重命名为html) 5、服务器中如果没有nginx则安装nginx 6、配置

    2024年02月07日
    浏览(53)
  • 如何使用Vite打包和部署项目到服务器二级路由

    如果你想把你用Vite构建的项目部署到服务器的二级路由上,比如 http://demo.dev/admin/  ,你需要注意以下几个步骤: 基础路径base是指你的项目在服务器上的相对路径,比如你的项目部署在  http://demo.dev/admin/  上,那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径

    2024年02月04日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包