uniapp部署服务器,uniapp打包H5部署服务器,uniapp将config.js抽离

目录

步骤一.在static文件夹下新建config.js文件

     config.js文件说明

        在config.js中放入使用的请求的接口地址,资源路径等

         congfig.js中的变量在页面中如何使用

步骤二.manifest.json配置

        1.在项目根目录(与app.vue同级)创建template.h5.html文件

        2.在manifest.json配置刚刚创建好的template.h5.html,以下方法任选其一

         2.1方法一   manifest.json  >  Web配置  >  index.html模板路径

       2.2 方法二   manifest.json  >  源码视图  > 找到h5输入代码 :   "template" : "template.h5.html"

到此就配置完成了

备注

config.js可以根据服务器中的具体存放位置修改打包后入口文件中的路径

如何配置打包后的运行基础路径/公共路径


步骤一.在static文件夹下新建config.js文件

     config.js文件说明

        在config.js中放入使用的请求的接口地址,资源路径等

         congfig.js中的变量在页面中如何使用

        在项目中不需要任何引入,可以直接使用这个变量(这个只在打包的H5才可以使用,如果开发多端,需要使用条件编译)

        

步骤二.manifest.json配置

        1.在项目根目录(与app.vue同级)创建template.h5.html文件

      

   template.h5.html代码直接复制下方代码即可

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><script src="./static/config.js"></script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

        2.在manifest.json配置刚刚创建好的template.h5.html,以下方法任选其一

         2.1方法一   manifest.json  >  Web配置  >  index.html模板路径

       2.2 方法二   manifest.json  >  源码视图  > 找到h5输入代码 :   "template" : "template.h5.html"

到此就配置完成了

备注

config.js可以根据服务器中的具体存放位置修改打包后入口文件中的路径

如何配置打包后的运行基础路径/公共路径

方法一

方法二

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37383.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全面体验ONLYOFFICE 8.1版本桌面编辑器

ONLYOFFICE官网 在当今的数字化办公环境中&#xff0c;选择合适的文档处理工具对于提升工作效率和团队协作至关重要。ONLYOFFICE 8.1版本桌面编辑器&#xff0c;作为一款集成了多项先进功能的办公软件&#xff0c;为用户提供了全新的办公体验。今天&#xff0c;我们将深入探索…

如何成为-10x工程师:反向教学大数据开发实际工作中应如何做

10x 工程师可能是神话&#xff0c;但 -10x 工程师确实存在。要成为 -10x 工程师&#xff0c;只需每周浪费 400 小时的工程时间。结合以下策略&#xff1a; 目录 如何使 10 名工程师的输出无效化改变需求大数据开发示例 创建 400 小时的繁忙工作任务示例大数据开发示例 创建 400…

WPF UI交互专题 界面结构化处理 查看分析工具Snoopy 逻辑树与视觉树 平面图像 平面图形 几何图形 弧线 01

1、开发学习环境 2、XAML界面结构化处理 3、逻辑树与视觉树 4、基于XAML的标签扩展方式 5、基础控件应用分析 6、控件常用属性与事件总结 7、常用控件特别属性说明 8、平面图形控件与属性 9、平面几何图形 10、弧线的处理过程 WPF项目-XAML 项目表现形式 项目结…

Sectigo或RapidSSL DV通配符SSL证书哪个性价比更高?

在当前的网络安全领域&#xff0c;选择一款合适的SSL证书对于保护网站和用户数据至关重要。Sectigo和RapidSSL作为市场上知名的SSL证书提供商&#xff0c;以其高性价比和快速的服务响应而受到市场的青睐。本文将对Sectigo和RapidSSL DV通配符证书进行深入对比&#xff0c;帮助用…

Firefox 编译指南2024 Windows10- 定制化您的Firefox(四)

1. 引言 定制化您的Firefox浏览器是一个充满乐趣且富有成就感的过程。在2024年&#xff0c;Mozilla进一步增强了Firefox的灵活性和可定制性&#xff0c;使得开发者和高级用户能够更深入地改造和优化浏览器以满足个人需求。从界面的微调到功能的增强&#xff0c;甚至是核心代码…

我在高职教STM32——GPIO入门之按键输入(2)

大家好&#xff0c;我是老耿&#xff0c;高职青椒一枚&#xff0c;一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次&#xff0c;同行应该都懂的&#xff0c;老师在课堂上教学几乎是没什么成就感的。正因如此&#xff0c;才有了借助 CSDN 平台寻求认同感和成就…

240628_昇思学习打卡-Day10-SSD目标检测

240628_昇思学习打卡-Day10-SSD目标检测 今天我们来看SSD&#xff08;Single Shot MultiBox Detector&#xff09;算法&#xff0c;SSD是发布于2016年的一种目标检测算法&#xff0c;使用的是one-stage目标检测网络&#xff0c;意思就是说它只需要一步&#xff0c;就能把目标检…

【C++题解】1466. 等差数

问题&#xff1a;1466. 等差数 类型&#xff1a;简单循环 题目描述&#xff1a; Peter 同学刚刚在学校学习了等差数列的概念。 等差数列&#xff0c;指的是一组数&#xff0c;这些数连续 2 个数的差值是相等的&#xff0c;比如&#xff1a;123&#xff0c;135&#xff0c;852…

SerDes介绍以及原语使用介绍(2)OSERDESE2原语仿真

文章目录 前言一、SDR模式1.1、设计代码1.2、testbench代码1.3、仿真分析 二、DDR模式下2.1、设计代码2.2、testbench代码2.3、仿真分析 三、OSERDES2级联3.1、设计代码3.2、testbench代码3.3、代码分析 前言 上文通过xilinx ug471手册对OSERDESE有了简单的了解&#xff0c;接…

[物联网专题] - 螺钉式接线端子的选择和辨识

工业设备上大量使用各式各样的端子来连接外部设备和电缆电线&#xff0c;其中用得最多的就是标准的螺钉式端子&#xff0c;其外形如下&#xff1a; 标准端子一般是2位&#xff08;2个接线端子&#xff09;&#xff0c;端子与端子之间可以级联&#xff0c;组成任意数量的位数。…

【前端】简易化看板

【前端】简易化看板 项目简介 看板分为三个模块&#xff0c;分别是待办&#xff0c;正在做&#xff0c;已做完三个部分。每个事件采取"卡片"式设计&#xff0c;支持任务间拖拽&#xff0c;删除等操作。 代码 import React, { useState } from react; import { Car…

【图论 树 深度优先搜索】2246. 相邻字符不同的最长路径

本文涉及知识点 图论 树 图论知识汇总 深度优先搜索汇总 LeetCode 2246. 相邻字符不同的最长路径 给你一棵 树&#xff08;即一个连通、无向、无环图&#xff09;&#xff0c;根节点是节点 0 &#xff0c;这棵树由编号从 0 到 n - 1 的 n 个节点组成。用下标从 0 开始、长度…

【漏洞复现】SolarWinds——任意文件读取

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 SolarWinds其Serv-UFTP服务存在目录遍历导致任意文件读取漏洞&a…

自然语言处理(NLP)—— 深度学习

1. 词嵌入&#xff08;Embeddings&#xff09; 1.1 词嵌入的基本概念 词嵌入&#xff08;Embeddings&#xff09;是一种将词语映射到高维空间&#xff08;比如N300维&#xff09;的技术&#xff0c;使得词语之间的欧几里得距离与它们的语义距离相关联。这意味着在这个向量空间…

Golang | Leetcode Golang题解之第203题移除链表元素

题目&#xff1a; 题解&#xff1a; func removeElements(head *ListNode, val int) *ListNode {dummyHead : &ListNode{Next: head}for tmp : dummyHead; tmp.Next ! nil; {if tmp.Next.Val val {tmp.Next tmp.Next.Next} else {tmp tmp.Next}}return dummyHead.Next …

Python测试框架 pytest : 从零开始的完全指南

pytest : 从零开始的完全指南 一、pytest 简介1.1 pytest 的背景和发展历史1.2 pytest 的概念1.3 pytest 的特点1.4 测试阶段分类1.5 单元测试框架的主要功能 二、pytest 的基本使用2.1 pytest 默认测试用例2.2 全局配置文件 pytest.ini2.3 执行 pytest2.4 跳过方法2.5 pytest …

1.SQL注入-数字型

SQL注入-数字型(post) 查询1的时候发现url后面的链接没有传入1的参数。验证为post请求方式&#xff0c;仅显示用户和邮箱 通过图中的显示的字段&#xff0c;我们可以猜测传入数据库里面的语句&#xff0c;例如&#xff1a; select 字段1,字段2 from 表名 where id1; 编辑一个…

SOAP vs REST介绍

SOAP&#xff08;简单对象访问协议&#xff09; 定义&#xff1a;SOAP是一种基于XML的通信协议&#xff0c;用于在网络中交换结构化信息&#xff0c;特别是在分布式环境和需要中介&#xff08;如网关或防火墙&#xff09;的环境中。它通过HTTP、SMTP等多种传输协议传输信息&…

示例:WPF中推荐一个Diagram开源流程图控件

一、目的&#xff1a;分享一个自研的开源流程图控件 二、使用方法 1、引用Nuget包&#xff1a; 2、添加节点列表和绘图控件 <DockPanel><ItemsControl DockPanel.Dock"Left"><h:GeometryNodeData Text"节点"/></ItemsControl><…

mysql8.0其他数据库日志

概述 我们在讲解数据库事务时&#xff0c;讲过两种日志:重做日志、回滚日志。 对于线上数据库应用系统&#xff0c;突然遭遇数据库宕机怎么办?在这种情况下&#xff0c;定位宕机的原因就非常关键。可以查看数据库的错误日志。因为日志中记录了数据库运行中的诊断信息&#xff…