uniapp打包h5后配置文件不被打包并且可修改

VIP文章 已于 2024-01-02 09:59:38 修改
阅读量727 收藏 7
点赞数 10
文章标签： uni-app html5
于 2023-12-25 16:58:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44735965/article/details/135203605
版权

前言

开发中遇到问题，每次修改配置信息都需要重新打包，现在想实现一个功能，每次打包之后都可以暴露出配置文件。

一、前期准备

在static目录下创建global_setting.js
在这里插入图片描述

文件的具体配置内容根据项目实际需求，我们暂时只需要后台请求地址可配置。

在这里插入图片描述

二、在根目录下创建template.h5.html，跟pages同级

在这里插入图片描述
template.h5.html的代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8"
最低0.47元/天 解锁文章
喝喝哈
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp开发的H5禁止公众号右上角菜单三个点功能.zip
11-19
uniapp开发的公众号H5，隐藏掉微信浏览器默认的属性和分享属性
uniApp 打包H5工程 超详细（打包-实现跨域-nignx配置）
热门推荐
qq_20236937的博客
04-18 1万+
参考文献： https://zhuanlan.zhihu.com/p/158100556 https://www.csdn.net/tags/MtTaEgxsNDk5OTAxLWJsb2cO0O0O.html https://www.jb51.net/article/180961.htm 打包步骤 当前端uniapp写的项目开发完成的时候，需要将页面打包出来，生成H5的静态文件，部署在服务器上，通过服务器链接地址，就可以直接在手机上点开访问 了。 在网上看了一圈，好像没有找到十分详细的教程，这里稍微详细的记
uniapp 小程序分包
织网的博客
12-05 623
小程序打包目前限制大小为2M，建议开发者控制小程序包大小，图片类资源放服务器里，然后src放网络路径来显示。 uniapp分包 subPackages 分包加载配置，此配置为小程序的分包加载机制。 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS脚本；而分包则是根据pages.json的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入.
uniapp无法打包H5
最新发布
Yui_NIE的博客
04-01 718
HBuilder 回退版本到3.8以下就解决了。发现是版本更新导致的。
uniapp vue3+vite 小程序转H5
weixin_50813125的博客
04-26 569
记录一下小程序转H5遇到的问题。
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
uniapp移动端H5在线预览PDF等文件实现源码及注解：https://a-jing.blog.csdn.net/article/details/120744302
uniapp 微信H5分享 下载就能用
12-15
针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495
htmltemplate
05-08
HTML5 Boilerplate是一个专业的前端模板，用于构建快速，健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架，因此您可以按照自己的方式自由地构建代码。 主页： ： 资料来源： : 推特： 快速开始 选择以下选项之一： 从下载最新的稳定版本，或使用创建自定义版本。 克隆git repo- git clone https://github.com/h5bp/html5-boilerplate.git并签出您要使用的带。 特征 HTML5准备好了。 放心使用新元素。 设计时要考虑到逐步增强。 包括： 用于CSS规范化和常见错误修复 通过CDN的 ，具有本地后备 定制的Modernizr构建以进行特征检测 Apache Server Configs可以改善网站的性能和安全性 占位符CSS媒体查询。
uniapp打包h5后自定义配置文件可修改 的操作方法
wang_J_8799的博客
09-01 4769
6.打包成H5后，直接修改static中的文件中的config.js即可，无需重复打包。2.在manifest.json 的h5下设置 template.h5.html。3.在项目根目录下新建 template.h5.html 文件。4.在template.h5.html 引入config.js。5.使用时，在页面上直接使用config.js的变量就可以了。1.在static目录下创建config.js。附上template.h5.html 代码。这个是我config.js 的内容。...
template.h5.html
qq_37707731的博客
01-12 1034
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" type="image/x-icon" href=""> &lt...
template标签用法（含vue-template的用法）
usernamecunzai的博客
07-30 1010
template标签用法（含vue） 1、h5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template原本是不可见的，它设置了display：none属性。 <!--显示"abc"这个内容，不显示"template",这是因为template标签天生不可见--> <template><div>template</div></template&
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
HBuilderX uniapp打包内存溢出解决放案.zip
05-20
uniapp项目体量过大时，打包H5会报错， - process out of memory 解决放案： 替换HBuildX内置\HBuilderX\plugins\node\node.exe版本 添加\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-72\binding.node文件
uni-app自定义多环境配置，动态修改appid
weixin_43180359的博客
08-17 6883
在企业级项目开发中，一般使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题，比如接口请求地址，不同环境的请求路径前缀都是不同的。变量对象中添加的是需要根据不同环境配置的变量，比如后端服务请求地址，小程序。但在很多企业中，可能就2个环境并不能满足实际场景，同时在开发微信小程序时，测试和生产都是不同的。一般小程序也就测试和生产两个环境，环境太多都要重新申请账号也麻烦。扩展节点，实现自定义条件编译平台，让每种编译具有不同环境标识。再扩展vite.config.js配置文件，用环境标识判断重写。
【uniapp-H5配置打包文件抽离出config.js进行线上可修改接口】
lalaladamowang的博客
03-29 2862
uniapp-H5配置打包文件抽离出config.js进行线上可修改接口一、项目背景二、uniapp中h5的使用1.vuecli和uniapp的区别2.static中创建config.js3.template.h5.html 一、项目背景 开发的过程中，会有测试和正式两个环境，尤其是在线上调试的接口会出现多样性，比如我们在git中提交的代码会部署到线上服务器和测试服务器，但是打包的时候需要固定接口地址，通常解决这类问题的方法就是使用location拿到当前域名来做接口地址，或者是单独配置一个config.j
uniapp打包成H5部署到服务器教程
qq_45961915的博客
10-13 3533
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 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的示例代码
王佳斌
03-21 3899
uniapp H5项目如何将配置文件不参与打包，uniapp H5 网站怎么让外部有个配置文件能修改，uniapp H5 打包后怎么修改配置呢，uniapp打包h5后自定义配置文件可修改，uniapp 打包成H5后,怎么直接修改static中的文件中的config.js即可,无需重复打包，uniappH5每次修改配置都需要重新打包？uniapp项目打包H5后 希望可以修改固定的配置，uniapph5项目打包后修改不方便有没有一个配置文件能不被打包，uniappH5网站每次打包后都会把配置文件给弄消失怎么办，
uniapp 最新 h5 自定义配置文件不参与打包,让外部有个配置文件能修改并且直接生效
12-12
最新的Uniapp版本已经支持H5自定义配置文件不参与打包，这样就可以让外部配置文件进行修改并且直接生效。 Uniapp是一个跨平台的开发框架，可以同时开发多个平台的应用程序，包括H5、小程序、App等。在H5中，我们可以通过外部配置文件来进行一些全局配置的修改，比如接口地址的修改、主题颜色的修改等。 首先，我们在Uniapp的项目中创建一个独立的配置文件，可以是JSON格式或者其他格式，命名为config.js。 在config.js中，我们可以定义需要修改的配置项，比如接口地址的URL、主题颜色的颜色值等。例如： ```javascript export default { apiUrl: 'http://api.example.com', themeColor: '#ff0000' } ``` 然后，我们在H5的入口文件main.js中引入这个配置文件，并将其挂载到Vue的原型上。例如： ```javascript import Vue from 'vue' import App from './App' import config from './config' Vue.prototype.$config = config Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 这样，我们就可以在整个项目中通过this.$config来访问和修改配置文件的内容了。 比如，在一个组件中，我们可以通过this.$config.apiUrl来获取接口地址，并使用它来发送网络请求。同时，外部可以通过修改config.js文件中的apiUrl的值来动态修改网络请求的目标地址。 这样，在外部修改config.js后，在H5中刷新页面，配置文件的修改就会生效，从而实现了外部配置文件的动态修改和生效。这样，我们就可以方便地调整应用程序的配置，而不需要重新打包发布。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值