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

news2024/10/5 17:07:54

目录

步骤一.在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.coloradmin.cn/o/1878508.html

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

相关文章

Unity扩展编辑器功能的特性

1.添加分组标题 用于在Unity的Inspector视图中为属性或变量组创建一个自定义的标题或头部&#xff0c;有助于在Inspector中组织和分类不同的属性&#xff0c;使其更易于阅读和管理。 [Header("Common Properties")] public float MouseSensitivity 5; public float…

Leetcode3192. 使二进制数组全部等于 1 的最少操作次数 II

Every day a Leetcode 题目来源&#xff1a;3192. 使二进制数组全部等于 1 的最少操作次数 II 解法1&#xff1a;遍历 由于 nums[i] 会被其左侧元素的操作影响&#xff0c;所以我们先从最左边的 nums[0] 开始思考。 分类讨论&#xff1a; 如果 nums[0]1&#xff0c;无需反…

CSS Flex弹性布局

一、传统布局与flex布局 1、传统布局 2、flex布局 二、flex布局原理 1、布局原理 2、flex布局体验 三、flex布局父项常见属性 1、常见的父项属性 2、flex-direction设置主轴的方向 3、justify-content 设置主轴上的子元素排列方式 4、flex-wrap 设置子元素是否换行 …

cv实战(一)

目录 前言一、加密解密图像1.常用的算法1.1 空间域加密技术&#xff1a;1.2 基于频域的水印技术&#xff1a;1.3 Arnold变换&#xff1a;1.4 DES与AES算法&#xff1a; 2.实验代码结果 二、数字汉字识别代码结果&#xff1a; 三 物体识别代码结果 四&#xff0c;物块追踪代码结…

【高性能服务器】服务器概述

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ 服务器概述 服…

C++ | Leetcode C++题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; class Solution { public:ListNode* reverseList(ListNode* head) {if (!head || !head->next) {return head;}ListNode* newHead reverseList(head->next);head->next->next head;head->next nullptr;return newHead;} …

PD芯片OTG功能的应用 LDR6500

随着科技的飞速发展&#xff0c;智能手机、平板电脑等电子设备已经成为我们日常生活和工作中不可或缺的工具。这些设备的功能日益强大&#xff0c;应用场景也愈发广泛&#xff0c;但随之而来的是对充电和数据传输效率的高要求。在这一背景下&#xff0c;PD&#xff08;Power De…

DM 的断点续传测试

作者&#xff1a; 大鱼海棠 原文来源&#xff1a; https://tidb.net/blog/4540ae34 一、概述 DM有all、full、incremental三种数据迁移同步方式&#xff08;task-mode&#xff09;&#xff0c;在all同步模式下&#xff0c;因一些特殊情况&#xff0c;需要变更上游MySQL的数…

OFDM的基本原理

OFDM技术使用相互正交的子载波组成多载波传输数据&#xff0c;此时不存在子载波间干扰和符号间干扰。设采样间隔为 &#xff0c;正交子载波可以表示为 基带信号a(n)采用矩形脉冲&#xff0c;则OFDM信号用公式可以表示 OFDM信号的N个采样点数据 可以用IFFT简化上述计算&#xf…

(已解决)Adobe Flash Player已不再受支持

文章目录 前言解决方案 前言 一般来说&#xff0c;很少遇到官方网站使用Adobe Flash Player来进行录用名单公示了。但是&#xff0c;今天就偏偏遇到一次&#xff0c; 用谷歌浏览器打不开&#xff0c; 点了没有反应&#xff0c;用其他的浏览器&#xff0c;例如windows自带的那…

英飞凌TC3xx之DMA工作原理及应用实例

英飞凌TC3xx之DMA工作原理及应用实例 1 DMA的架构2 必要的术语解释3 DMA请求3.1 DMA软件请求3.2 DMA硬件请求3.3 DMA 菊花链请求3.4 DMA自动启动请求3.5 总结4 小结DMA是直接存储访问Direct Memory Access的简称。它的唯一职能就是在不需要CPU参与的情况下,将数据从源地址搬运…

正版软件 | R-Drive Image:数据安全守护者,您的智能备份专家

在数字化时代&#xff0c;数据安全的重要性不言而喻。R-Drive Image 是一款功能强大的备份和恢复软件&#xff0c;为您提供了全面的解决方案&#xff0c;确保您的数据安全无忧。 精确备份&#xff0c;全面保护 R-Drive Image 能够创建硬盘驱动器的逐字节副本&#xff0c;无论是…

KBL410-ASEMI智能AI专用整流桥KBL410

编辑&#xff1a;ll KBL410-ASEMI智能AI专用整流桥KBL410 型号&#xff1a;KBL410 品牌&#xff1a;ASEMI 封装&#xff1a;KBL-4 正向电流&#xff08;Id&#xff09;&#xff1a;4A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#xff1a;2…

2024百度之星第一场-110串

补题链接&#xff1a; 码蹄集 三个状态转移的计数dp 先确定状态 n个数至多修改k次&#xff0c;保证不出现字串“110” 常规想法先把状态确定为dp[n][k][0/1]&#xff0c;前n个数&#xff0c;修改k次后&#xff0c;末尾数为0/1&#xff0c;不能转移再换思路。 初始状态设定如…

PySide(PyQt)在图像上画线

1、按鼠标左键任意画线 import sys from PySide6.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget from PySide6.QtGui import QPainter, QPixmap, QMouseEvent, QColor, QPen from PySide6.QtCore import Qt, QPointclass PaintLabel(QLabel):def __init__(self…

python–基础篇–正则表达式–是什么

文章目录 定义一&#xff1a;正则表达式就是记录文本规则的代码定义一&#xff1a;正则表达式是一个特殊的字符序列&#xff0c;用于判断一个字符串是否与我们所设定的字符序列是否匹配&#xff0c;也就是说检查一个字符串是否与某种模式匹配。初识 Python 正则表达式 定义一&a…

Python: PyCharm 2023.1 调试

1.设断点 &#xff08;行号对应的红色点&#xff0c;在需要设置断点的代码行与行号之间鼠标点击即可以设置&#xff09; 2.shiftF9,或 altshiftf9 选择文件 或是在菜单 Run->debug "main" 或是在菜单Run->debug 选择文件 &#xff08;鼠标光标放在设置第一个…

单片机学习(16)--直流电机驱动

直流电机驱动 15.1直流电机驱动基础知识1.直流电机介绍2.电机驱动电路3.PWM介绍 15.2LED呼吸灯和直流电机调速1.LED呼吸灯代码2.直流电机调速&#xff08;1&#xff09;产生PWM的方法&#xff08;2&#xff09;工程目录&#xff08;3&#xff09;main.c函数 15.1直流电机驱动基…

一秒记单词:音通义通,一秒牢记

一秒记单词&#xff0c;从小学到高中&#xff0c;一秒牢记 一、小学生记单词&#xff0c;快速突破 1.1 好的开始&#xff0c;是成功的一半 sun n.太阳 【通】尚 moon n.月亮 【通】母恩 mother n.母亲&#xff0c;妈 【通】妈汁 sea n.海&#xff0c;大海 【通】细 sand …

简述设计模式-工厂模式

概述 工厂模式是为了提供创建对象的方式&#xff0c;无需制定要创建的具体类。 举个例子&#xff0c;假如我是甲方需要制造一辆车&#xff0c;我可以要油车&#xff0c;可以要电车&#xff0c;也可以油电混动车&#xff0c;如果没有工厂&#xff0c;我需要自己找到对应的制造…