uniapp打包h5 - 相对路径配置

最新推荐文章于 2024-06-24 08:44:51 发布
最新推荐文章于 2024-06-24 08:44:51 发布
阅读量8.8k 收藏 9
点赞数 2
分类专栏： web前端 文章标签： uniapp 相对路径配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014054437/article/details/105407444
版权
本文介绍了使用HbuilderX将uniapp项目打包为H5时遇到的问题及解决方案。在发行到H5后，由于引用文件路径为绝对路径导致页面加载失败。通过修改manifest.json文件的h5配置，将运行的基础路径设置为'./'，可以解决此问题，使得打包后的index.html能正常显示页面。
摘要由CSDN通过智能技术生成

uniapp打包h5 - 相对路径配置

发行到h5

工具：HbuilderX

  • 步骤1：发行 -> 网站h5手机版
    发行到h5
  • 步骤2：填写网站标题和域名，点击发行
    填写h5信息
    在控制台可以很清楚地看到，项目打包的输出路径在： \ unpackage \ dist \ build \ h5中，
    同时，官方的说法是要部署到web服务器使用，不支持本地file协议打开。
    控制台
    我们来到h5目录，打开里面的 index.html ，页面一片空白，控制台报错:
    index.html报错

一看就明白怎么回事了吧！引用文件的路径是绝对路径，到根目录去了，此时只要把它改为相对路径就可以了，操作如下：

manifest.json文件h5配置

打开ma

最低0.47元/天 解锁文章
音浪豆豆_Rachel
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp打包h5后自定义配置文件可修改 的操作方法
06-22
本篇文章将详细介绍如何在uniapp打包H5后，对自定义配置文件进行修改，以满足项目的个性化需求。 首先，我们需要了解uniapp的构建流程。在uniapp项目中，`uni.config.js`是全局配置文件，它包含了项目的基本信息、...
uniapp同目录的相对地址_HTML 相对路径与绝对路径
weixin_39815600的博客
11-14 3314
文件路径文件路径就是文件在电脑(服务器)中的位置，表示文件路径的方式有两种：相对路径和绝对路径。路径标识：标识符号说明/路径标识.当前目录..上一层目录“.”和“..”常与“/”结合使用表示各个路径层次：路径说明./当前路径，可省略/网站根目录，为绝对路径../上一层目录，可重复使用，如../../，表示上上层目录相对路径(Relative Path)相对路径就是指由这个文件所在的路径引...
uniapp打包h5静态资源路径错误解决 相对路径修改
时间在飞飞的博客
05-13 5903
如果用HBuilderX打开的话直接可视化添加 或者在src/manifest.json文件源码中修改
uniapp部署服务器,uniapp打包H5部署服务器,uniapp将config.js抽离
最新发布
weixin_48095278的博客
06-24 2851
uniapp部署服务器,uniapp打包H5部署服务器,uniapp将config.js抽离
uniApp h5项目通过命令行打包，并生成指定路径、文件名称
askuld的博客
04-07 5909
第四步：将hb项目中 package.json文件中dependencies里面的依赖引入到copy过来的 package.json文件中；第一步：新建src文件夹，将一下文件放入src文件夹中。第二步：删除hb项目中除了src之外的所有文件。第七步：npm run build 打包项目。第三步：将cli项目中的以下文件copy过来。第一步：采用hbuilder新建一个项目。第六步：npm run dev运行项目。第二部：通过cli新建一个项目。回到主题，将hb项目作为基础，我们将hb的项目作为基础。
uni-app基础知识介绍
yangyanqin2545的博客
03-17 2051
uni-app基础知识点
uni-app 系列之（三）—— 资源引用路径
且听风吟的博客
03-18 2208
uni-app 资源引用路径
uniapp打包成H5部署到服务器教程
qq_45961915的博客
10-13 4660
2：在网站域名这一栏填写，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址）。[在这里插入图片描述](https://img-blog.csdnimg.cn/bd5dcec4ee634cc3bcd0d895669e7923.png。链接：https://www.jianshu.com/p/dee3043bc994。8：注意，这三个地方的路径名称一定要一致哦。1：打包时候的配置的运行的基础路径。3：浏览器里面访问的路径。
uni-app 打包为 H5 并上传服务器
01-08
总的来说，将uni-app打包为H5并上传至服务器是一个涉及配置、打包、上传等多个步骤的过程，每个环节都需要细心处理，以确保应用能顺利地在Web环境下运行。在实际操作中，根据项目的特性和服务器环境，可能还需要进行...
uniapp模板--主页
06-06
uni-app是一个多端开发框架，它允许开发者使用Vue.js语法一次编写，跨平台运行，覆盖iOS、Android、Web（H5）、微信小程序、支付宝小程序等多个平台。下面我们将详细探讨这个模板中涉及到的知识点。 首先，我们来看...
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
8. **配置pages.json和manifest.json**：这两个文件是uniapp项目的配置文件，`pages.json`用于定义项目中的页面路由，`manifest.json`则涉及打包和发布相关的设置。在本案例中，你可能需要确保页面路径正确，并根据...
uniapp-book-mall.zip
07-30
6. **路由管理**：uni-app使用`uni-router`进行页面间的跳转管理，定义在`router`目录中的`index.js`文件，可以配置各个页面的路径和对应的组件。 7. **样式设计**：项目通常采用CSS预处理器如Less或Scss，以提高...
uniapp image 相对路径无法显示
cimbala的博客
02-06 841
在src里面的内容加上require(“”)src使用相对路径，图片无法显示。
uniapp打包详细步骤和避坑指南
m0_72929120的博客
06-29 2104
（网站域名取对应项目的域名，一般为https/http开头）填完后直接点击发行。4.注意区别打包时的部署路径和请求接口的路径。配置---运行时的基础路径，2. 修改完后，点击。
uni-app 学习笔记（三）uni-app中的各种引用
qq_44648936的博客
04-12 5466
一、组件引用 组件的引用有三种办法 1、默认写法，即导入——注册——使用 2、vue3使用了新的语法糖，优化了步骤 3、uni-app继续优化为一步，引入easycom机制 但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用 举个栗子 新建components目录和test组件 <template> <view class="content"> <button type="p
uniapp踩坑笔记——H5端打包之后页面空白/配置基础路径/相对路径
热门推荐
没沙发
07-11 2万+
需求 使用静态文件便可以访问项目，不需要部署到服务器上。 遇到的问题
uniapp背景图片相对路径问题
小程序开发
08-08 674
小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。支持 base64 格式图片。
uniapp开发，打包成H5部署到服务器
maoge_666的博客
04-14 1万+
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。 这样通过服务器链接地址，直接可以在手机上点开来访问。
uniapp打包h5配置线上域名
08-30
要在Uniapp中打包H5并配置线上域名，需要按照以下步骤进行操作。 1. 在项目根目录中找到并打开`vue.config.js`文件。 2. 添加以下代码段到配置文件中： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://your-domain.com', // 设置目标域名 ws: true, // 是否支持 WebSocket changeOrigin: true // 是否跨域 } } } } ``` 3. 将`https://your-domain.com`替换为你实际要配置的线上域名。 4. 在应用中的网络请求代码中，将请求接口的域名从相对路径改为绝对路径（例如从`'/api/news'`改为`'https://your-domain.com/api/news'`）。 5. 运行`npm run serve`以启动开发服务器进行测试。 6. 打包正式发布前，执行`npm run build`命令以生成生产版本的代码。 7. 将生成的`dist`文件夹中的内容部署到线上服务器。 8. 如果有必要，根据线上服务器的配置要求进行额外的调整，例如配置HTTPS证书。 以上就是在Uniapp中打包H5并配置线上域名的简要步骤。根据实际需求和线上环境，可能还需要进行一些额外的配置和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值