当前位置： 首页 > article >正文

vue设置自定义logo跟标题

article 2026/2/26 6:47:31

准备 Logo 图片 将自定义的 Logo 图片（如 logo.png）放置在项目的 public文件夹下。

 使用环境变量设置 Logo 和标题（可选） 创建或修改 .env 文件 在项目根目录下创建或修改 .env 文件，添加以下内容：

VITE_APP_TITLE=JBoltAI 物料小助手
VITE_APP_LOGO=/logo.png

安装 vite-plugin-html 插件： 

npm install vite-plugin-html --save-dev  

然后在 vite.config.js 中配置插件：

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import {createHtmlPlugin} from "vite-plugin-html";const customerElements = ["chat-message",'chat-message-panel','chat-opt-panel','chat-tip','msg-tip','reference-item'
]export default defineConfig(({command, mode}) =>{const env = loadEnv(mode, process.cwd(), 'VITE_')return {plugins: [vue({template: {compilerOptions: {isCustomElement: tag => customerElements.some(item => item == tag)}}}),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [resolve(process.cwd(), 'src/assets/svg-icon/local')],// 指定symbolId格式symbolId: `icon-[name]`,// 是否压缩svgoOptions: true}),createHtmlPlugin({inject: {data: {...env},},}),],resolve: {alias: {'@': resolve(__dirname, 'src'),'~': resolve(__dirname)},},server: {host: '0.0.0.0',port: 3206,open: true},}
})

 修改 public/index.html 文件 HTML 

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="<%- VITE_APP_LOGO %>"><title><%- VITE_APP_TITLE %></title>
</head>
<body><div id="app"></div>
</body>
</html>

相关文章：

vue设置自定义logo跟标题

准备 Logo 图片 将自定义的 Logo 图片&#xff08;如 logo.png&#xff09;放置在项目的 public文件夹下。 使用环境变量设置 Logo 和标题&#xff08;可选&#xff09; 创建或修改 .env 文件 在项目根目录下创建或修改 .env 文件&#xff0c;添加以下内容&#xff1a; VITE_A…...

编程日记 2026/2/26 6:47:31

Linux 账号和权限管理命令选项解释

用户账号文件 配置文件 /etc/passwd&#xff1a;用于保存用户 输出如下&#xff1a; root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin bin:x:2:2:bin:/bin:/usr/sbin/nologin sys:x:3:3:sys:/dev:/usr/sbin/nologin 每一行代表一个用户&…...

编程日记 2026/2/16 4:38:57

尝试在软考65天前开始成为软件设计师-计算机网络

OSI/RM 七层模型 层次名功能主要协议7应用层实现具体应用功能 FTP(文件传输)、HTTP、Telnet、 POP3(邮件)SMTP(邮件) ------- DHCP、TFTP(小文件)、 SNMP、 DNS(域名) 6表示层数据格式,加密,压缩.....5会话层建立,管理&终止对话4传输层端到端连接TCP,UDP3网络层分组传输&a…...

编程日记 2026/2/26 2:16:31

VMware主机换到高配电脑，高版本系统的问题

原来主机是i3 ,windows7系统&#xff0c;vmware 14.0,虚机系统是ubuntu 14.04。目标新机是i7 14700KF,windows11系统。原以为安装虚拟机&#xff0c;将磁盘文件&#xff0c;虚拟机配置文件拷贝过去可以直接用。 新目标主机先安装了vmware 15&#xff0c;运行原理虚机&#xff0…...

编程日记 2026/2/21 1:52:57

2025年3月 CCF GESP C++ 二级 真题解析

1. 单选题(每题2分&#xff0c;共30分) 第1题 试题&#xff1a;2025年春节有两件轰动全球的事件&#xff0c;一个是DeepSeek横空出世&#xff0c;另一个是贺岁片《哪吒2》票房惊人&#xff0c;入了全球票房榜。下面关于DeepSeek与《哪吒2》的描述成立的是( )。 A. 《哪吒2》是一…...

编程日记 2025/12/22 23:16:51

Nginx请求头Hos头攻击

HTTP请求头中的Host字段用于指定客户端请求的目标主机名&#xff08;域名/IP&#xff09;。当Nginx作为反向代理时&#xff0c;可利用该字段进行访问控制&#xff0c;防止非法域名或IP直接访问服务。 解决方法&#xff1a;添加判断请求头&#xff0c;如果不是指定请求头&#…...

编程日记 2026/2/13 17:01:36

2025年03月10日人慧前端面试（外包滴滴）

目录 普通函数和箭头函数的区别loader 和 plugin 的区别webpack 怎么实现分包&#xff0c;为什么要分包webpack 的构建流程变量提升react 开发中遇到过什么问题什么是闭包vue 开发中遇到过什么问题vue中的 dep 和 watcher 的依赖收集是什么阶段什么是原型链react setState 是同…...

编程日记 2026/2/16 12:42:08

【Linux内核系列】：动静态库详解

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 有些鸟儿是注定是关不住的&#xff0c;因为它们的每一片羽翼都沾满了自由的光辉 ★★★ 本文前置知识&#xff1a; 编译与链接的过程…...

编程日记 2026/2/25 1:28:05

maptalks图层交互 - 模拟 Tooltip

maptalks图层交互 - 模拟 Tooltip 图层交互-模拟tooltip官方文档 <!DOCTYPE html> <html><meta charsetUTF-8 /><meta nameviewport contentwidthdevice-width, initial-scale1 /><title>图层交互 - 模拟 Tooltip</title><style typet…...

编程日记 2025/12/22 22:06:05

windows环境下NER Python项目环境配置（内含真的从头安的perl配置）

注意 本文是基于完整项目的环境配置&#xff0c;即本身可运行项目你拿来用 其中有一些其他问题&#xff0c;知道的忽略即可 导入pycharm基本包怎么下就不说了&#xff08;这个都问&#xff1f;给你一拳o(&#xff40;ω*)o&#xff09; 看perl跳转第5条 1.predict报错多个设备…...

编程日记 2026/2/15 23:16:00

IDEA批量替换项目下所有文件中的特定内容

文章目录 1. 问题引入2. 批量替换项目下所有文件中的特定内容2.1 右键项目的根目录&#xff0c;点击在文件中替换2.2 输入要替换的内容 3. 解决替换一整行文本后出现空行的问题4. 增加筛选条件提高匹配的精确度 更多 IDEA 的使用技巧可以查看 IDEA 专栏&#xff1a; IDEA 1. 问…...

编程日记 2026/2/26 3:56:55

【计算机网络】网络编程

文章目录 1. 客户端/服务器2. TCP/UDP协议3. 网络编程套接字-socket3.1 API的使用3.1 DatagramScoket类3.1 DatagramScoket类 4. 通过UDP实现回显服务器程序4.1 服务器代码4.2 客户端代码4.3 代码执行过程4.4 通过UDP实现翻译客户端 5. 通过TCP实现回显服务器5.1 服务器代码5.2…...

编程日记 2026/2/21 16:29:18

Django 中@login_required 配置详解

在 Django 中对 login_required 进行配置&#xff0c;主要涉及全局配置和视图函数局部配置两方面&#xff0c;下面为你详细介绍配置方法。 全局配置 全局配置主要是设定默认的登录 URL&#xff0c;也就是当未登录用户尝试访问被 login_required 装饰的视图时&#xff0c;会被…...

编程日记 2025/12/17 6:36:01

【408--复习笔记】数据结构

【408--复习笔记】数据结构 1.绪论2.线性表3.栈、队列、数组4.串5.树与二叉树6.图7.查找8.排序 1.绪论 2.线性表 3.栈、队列、数组 4.串 5.树与二叉树 6.图 7.查找 8.排序...

编程日记 2026/2/18 18:46:42

Android ＜queries＞声明的作用和配置方法

在Android应用中使用resolveActivity方法会提示在清单文件中添加标签&#xff0c;下面我们就看下声明的作用和配置方法&#xff1a; 一、queries 声明的作用 在Android 11及更高版本中&#xff0c;声明被引入以控制应用之间的交互。通过在AndroidManifest.xml中添加标签&…...

编程日记 2026/2/25 16:34:11

C++多线程编程：从创建到管理的终极指南

在高性能计算时代，掌握多线程编程是提升程序效率的必修课！本文将手把手教你如何用C++11标准库轻松创建和管理线程，告别单线程的“龟速”，让代码跑出多核CPU的性能！ 一、多线程为何重要？ 充分利用多核CPU：现代计算机普遍支持多核并行，多线程可让程序性能指数级提升。提升…...

编程日记 2026/2/13 15:47:45

【蓝桥杯】4535勇闯魔堡（多源BFS + 二分）

思路 k有一个范围&#xff08;0到怪物攻击的最大值&#xff09;&#xff0c;求满足要求的k的最小值。很明显的二分套路。 关键是check函数怎么写&#xff0c;我们需要找到一条从第一行到最后一行的路径&#xff0c;每一次可以从上下左右四个方向前进&#xff0c;那么我么可以用…...

编程日记 2026/2/22 7:44:07

HTML图像标签的详细介绍

1. 常用图像格式 格式特点适用场景JPEG有损压缩&#xff0c;文件小&#xff0c;不支持透明适合照片、复杂图像PNG无损压缩&#xff0c;支持透明&#xff08;Alpha通道&#xff09;适合图标、需要透明背景的图片GIF支持动画&#xff0c;最多256色简单动画、低色彩图标WebP谷歌开…...

编程日记 2026/2/24 5:20:22

Chapter 4-15. Troubleshooting Congestion in Fibre Channel Fabrics

show zone member: Shows the name of the zone to which a device belongs to. This command can be used to find the victims of a culprit device or vice versa. 显示设备所属的区域名称。该命令可用于查找罪魁祸首设备的受害者，反之亦然。 show zone active: Shows the…...

编程日记 2026/2/25 17:58:13

QT三 自定义控件

一 自定义控件 现在的需求是这样&#xff1a; 假设我们要在QWidget 上做定制&#xff0c;这个定制包括了关于 一些事件处理&#xff0c;意味着要重写QWidget的一些代码&#xff0c;这是不实际的&#xff0c;因此我们需要自己写一个MyWidget继承QWidget&#xff0c;然后再MyWi…...

编程日记 2026/2/15 10:55:12

在 ASP .NET Core 9.0 中使用 Scalar 创建漂亮的 API 文档

示例代码&#xff1a;https://download.csdn.net/download/hefeng_aspnet/90407900 Scalar 是一款可帮助我们为 API 创建精美文档的工具。与感觉有些过时的默认 Swagger 文档不同&#xff0c;Scalar 为 API 文档提供了全新而现代的 UI。其简洁的设计让开发人员可以轻松找到测试…...

编程日记 2026/2/15 23:09:41

用于 RGB-D 显著目标检测的点感知交互和 CNN 诱导的细化网络（问题）

摘要 问题一&#xff1a;但在对自模态和跨模态的全局长距离依赖关系进行建模方面仍显不足。什么意思&#xff1f; 自模态&#xff08;Intra-modal&#xff09;全局依赖&#xff1a;在同一模态内&#xff0c;长距离像素之间的信息交互对于理解全局背景很重要&#xff0c;但 CN…...

编程日记 2026/2/15 19:47:39

python3 -m http.sever 8080加载不了解决办法

解决方法很多&#xff0c;本文设置各种处理方法&#xff0c;逻辑上需要根据你的自身情况选择 我会告诉你遇到这种问题怎么做&#xff0c;根据具体症状处理 如需转载&#xff0c;标记出处 背景&#xff1a; 1。如图 2.。域名访问不了 http://www.meiduo.site:8080/register.ht…...

编程日记 2026/2/18 17:02:19

Oracle数据库性能优化全攻略：十大关键方向深度解析与实践指南

文章目录 一、SQL查询优化二、索引优化三、内存管理四、I/O优化五、分区表与分区索引六、并行处理七、统计信息管理八、锁与并发控制九、数据库参数调优十、应用设计优化结论 在当今数据驱动的时代&#xff0c;数据库的性能优化成为了确保企业应用高效运行的关键。Oracle作为业…...

编程日记 2026/2/18 15:31:21

第十一章 | 智能合约主网部署与验证详解

&#x1f4da; 第十一章 | 智能合约主网部署与验证详解 ——让你的合约真正上线、公开、透明&#xff01; ✅ 本章导读 前面我们写了各种合约&#xff0c;ERC20、NFT、DAO…… 但只在本地测试或测试网上部署运行&#xff0c;项目还没“上链”&#xff01; 主网上线部署&#…...

编程日记 2026/2/13 22:25:15

蓝桥杯 回文数组

问题描述 小蓝在无聊时随机生成了一个长度为 n 的整数数组&#xff0c;数组中的第 i 个数为 a_i&#xff0c;他觉得随机生成的数组不太美观&#xff0c;想把它变成回文数组&#xff0c;也就是对于任意 i ∈ [1, n] 满足&#xff1a; a_i a_(n-i1)小蓝一次操作可以指定相邻的…...

编程日记 2026/2/16 23:29:25

windows清除电脑开机密码，可保留原本的系统和资料，不重装系统

前言 很久的一台电脑没有使用了&#xff0c;开机密码忘了&#xff0c;进不去系统 方法 1.将一个闲置u盘设置成pe盘&#xff08;注意&#xff0c;这个操作会清空原来u盘的数据&#xff0c;需要在配置前将重要数据转移走&#xff0c;数据无价&#xff0c;别因为配置这个丢了重…...

编程日记 2026/2/22 11:40:05

【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测

【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测 文章目录 【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测前言YOLOV3模型运行环境搭建YOLOV3模型运行数据集准备YOLOV3运行模型训练模型验证模型推理导出onnx模型 总结…...

编程日记 2026/2/17 8:33:59

html5-qrcode前端打开摄像头扫描二维码功能

实现的效果如图所示&#xff0c;全屏打开并且扫描到二维码后弹窗提醒&#xff0c;主要就是使用html5-qrcode这个依赖库&#xff0c;html5-qrcode开源地址&#xff1a;GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at:…...

编程日记 2026/2/17 4:52:23

ui_auto_study（持续更新）

通过where python来找到python解释器的安装目录 如果不适配&#xff0c;谷歌浏览器插件可以在这个地址下载对应的驱动 谷歌浏览器驱动下载地址 下载对应的驱动版本&#xff0c;替换原驱动 替换后&#xff0c;可以执行成功 div代表标签 .开头的代表类# 使用class定位元素 …...

编程日记 2026/2/18 23:33:32