当前位置: 首页 > news >正文

vue3 vite title 页面标题设置

效果图:

1. 安装 vite-plugin-html 插件

npm install vite-plugin-html -D

2. 修改 vite.config.js

import {defineConfig, loadEnv} from 'vite'
import { createHtmlPlugin } from "vite-plugin-html"
import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig(({mode, command, ssrBuild}) => {const root = process.cwd();const env = loadEnv(mode, root);return {plugins: [vue(),//修改index.html标题createHtmlPlugin({inject: {data: {title: env.VITE_APP_API_TITLE,},},}),],resolve: {//路径别名alias: {'@': resolve(__dirname, './src')}},server: {proxy: {[env.VITE_APP_BASE_API]: {// target: 'http://localhost:3001',changeOrigin: true,rewrite: path => path.replace(env.VITE_APP_BASE_API, '')}},hmr: {overlay: false, // 禁用开发服务器错误的屏蔽},},build: {minify: "terser", // 混淆器,terser 构建后文件体积更小,'terser' | 'esbuild'rollupOptions: {output: {// 最小化拆分包manualChunks(id) {if (id.includes("node_modules")) {return id.toString().split("node_modules/")[1].split("/")[0].toString();}},chunkFileNames: "js/[name].[hash].js", // 用于命名代码拆分时创建的共享块的输出命名,[name]表示文件名,[hash]表示该文件内容hash值},},terserOptions: {// 生产环境移除console打印compress: {drop_console: true,drop_debugger: true,},// 去掉注释内容output: {comments: true,},}}}}
)

index.html 的内容

<title><%= title %></title>
上述语法使用 vite.config.js中的变量

相关文章:

vue3 vite title 页面标题设置

效果图&#xff1a; 1. 安装 vite-plugin-html 插件 npm install vite-plugin-html -D2. 修改 vite.config.js import {defineConfig, loadEnv} from vite import { createHtmlPlugin } from "vite-plugin-html" import {resolve} from path import vue from vitej…...

spring boot添加License(软件许可)

文章目录 前言1. 生成钥匙库2. 生成证书3. 生成公匙库4.业务代码1. 引入依赖2. 关键代码3. 配置文件 5、改成线上地址&#xff0c;这样不用每次打包&#xff0c;发送license.lic文件给客户&#xff0c;重启项目就行5.1、工具类5.2 修改部分&#xff1a; 总结 前言 工作需要给软…...

LangChain打造一个AI客服

最近在学习LangChain&#xff0c;langchain的第一个入门应用就是和ChatGPT结合形成的一个AI客服&#xff0c;本期文章就带大家一起认识下 LangChain LangChain是现在用得最多的AI框架&#xff0c;langchain在帮助如基于文档数据的回答、聊天机器人和代理这类的应用程序 langch…...

【前端三剑客之JS】详解JS

1. JS的引入方式 (1). 内部脚本方式引入 在页面上&#xff0c;通过一对script标签引入js代码.script代码放置位置有一定随意性&#xff0c;一般放在head标签中. (2).外部脚本方式引入. 内部脚本只能在当前页面中使用&#xff0c;代码复用度不高.可以将脚本放在单独的js文件…...

重庆耶非凡科技有限公司有选品师项目培训吗?

在当今科技飞速发展的时代&#xff0c;各种科技公司如雨后春笋般涌现&#xff0c;它们在不同领域发挥着重要作用。其中&#xff0c;重庆耶非凡科技有限公司以其独特的业务模式和专业服务&#xff0c;在业界赢得了良好的口碑。那么&#xff0c;重庆耶非凡科技有限公司究竟是做什…...

格式转化——Labelme标注好的json文件批量转为png(标签)文件(物体为红色,背景为黑色)和jpg原图

作用如题目&#xff0c;批量将标注好的json文件转成png标签&#xff0c;jpg原图&#xff0c;其中标签时红黑图。 代码如下&#xff1a; import argparse import base64 import json import os import os.path as osp import imgviz import PIL.Image import yaml from labelm…...

力扣刷题--2535. 数组元素和与数字和的绝对差【简单】

题目描述 给你一个正整数数组 nums 。 元素和 是 nums 中的所有元素相加求和。 数字和 是 nums 中每一个元素的每一数位&#xff08;重复数位需多次求和&#xff09;相加求和。 返回 元素和 与 数字和 的绝对差。 注意&#xff1a;两个整数 x 和 y 的绝对差定义为 |x - y| 。…...

2024年【危险化学品经营单位安全管理人员】考试报名及危险化学品经营单位安全管理人员找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位安全管理人员考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品经营单位安全管理人员找解析题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品经营单位安全管…...

IntelliJ IDEA集成Baidu Comate,商城系统支付交易功能开发实战

文章目录 Baidu Comate介绍安装配置体验安装插件配置体验注释生成代码技术问答 实战设计表生成代码导入数据 总结 Baidu Comate介绍 在科技互联网飞速发展的今天&#xff0c;百度凭借其深厚的技术积累和创新能力&#xff0c;推出了一款名为Baidu Comate智能代码助手的产品。该…...

20212313 2023-2024-2 《移动平台开发与实践》第5次作业

20212313 2023-2024-2 《移动平台开发与实践》第5次作业 1.实验内容 设计并开发一个地图应用系统。 该实验需提前申请百度API Key&#xff0c;调用接口实现百度地图的定位功能、地图添加覆盖物和显示文本信息。 2.实验过程 2.1 获取SHA1 &#xff08;1&#xff09;打开控制台…...

Python图形界面(GUI)Tkinter笔记(十二):用【Entry()】实现单行文本输入(3)

Tkinter库中的单行文本输入框(Entry)除了与get()方法组合产生多姿多彩的反应,还可以与insert()方法组合而产生新的功能。例如用于用户不作任何输入就用默认值当作用户的输入这种场境,或在输入文本中加入指定的字符等。 其余笔记:【Python图形界面(GUI)Tkinter笔记(总目录…...

前端渲染页面的原理

之前一直不愿意写一篇关于原理的&#xff0c;因为说起来实在是太繁杂&#xff0c;要写得细&#xff0c;码字梳理&#xff0c;计算下来起码都要差不多三周。以前一直躲避这个事情&#xff0c;现在反正有时间&#xff0c;为了不荒废自己&#xff0c;那就从头捋一遍。也方便自己后…...

【一竞技DOTA2】RAMZES666替补参加裂变联赛

1、根据主办方文件,RAMZES666将继续作为Tundra战队替补参加裂变联赛。该比赛为欧洲线上赛,于5月27日-30日举行,总奖金8万美元。 除此之外,Nigma战队在上个月宣布四号位Matthew离队后,也选择启用老队员GH参赛。而在本月初让ah fu转回教练、携替补Thiolicor出战PGL瓦拉几亚的Secr…...

1109 擅长C(测试点0,1,2,3)

当你被面试官要求用 C 写一个“Hello World”时&#xff0c;有本事像下图显示的那样写一个出来吗&#xff1f; ..C.. .C.C. C...C CCCCC C...C C...C C...C CCCC. C...C C...C CCCC. C...C C...C CCCC. .CCC. C...C C.... C.... C.... C...C .CCC. CCCC. C...C C...C C...C C…...

北京新高度画室:端午假期免费吃,住,学!

经历了联考校考的过关斩将 2024届追梦人终于要迎来最后一战高考 承载着梦想的日子在一天天靠近 千里遥程将要看到希望的曙光 新高度祝所有高三学子高考顺利金榜题名 梦想是一场接力赛 新高度画室2025届集训已经开始 如果你错过了清明、错过了五一 那么高考&端午试学…...

电脑重要文件如何加密保护?教你两种方法

加密是保护电脑重要文件的常见方法&#xff0c;可以有效避免文件数据泄露。那么&#xff0c;电脑重要文件该如何加密保护呢&#xff1f;下面小编就来教你两种方法&#xff0c;帮助你解决文件安全问题。 超级加密3000 超级加密3000是一款专业的电脑数据加密软件&#xff0c;可以…...

新零售收银解决方案:传统门店超市的数字化-亿发

在数字化浪潮的推动下&#xff0c;零售行业正经历着前所未有的变革。阿里巴巴提出的“新零售”概念&#xff0c;不仅仅是一个商业口号&#xff0c;它代表了一种全新的商业模式和运营理念。随着时代的进步和消费需求的不断升级&#xff0c;新零售的兴起已成为行业发展的必然趋势…...

独家揭秘!Amazon、lazada、Shopee测评自养号,新手也能秒变高手!

近年来&#xff0c;随着国内卖家涌入跨境电商平台&#xff0c;市场竞争愈加激烈。为了迅速占领市场&#xff0c;测评变得至关重要。然而&#xff0c;真人测评供不应求&#xff0c;服务商账号质量不一&#xff0c;且存在高权重账号稀缺和黑卡下单风险。因此&#xff0c;许多大卖…...

企企通入选第一新声《2024年中国CIO数字化产品选型白皮书》供应链数字产品可信名录

近日&#xff0c;第一新声研究院根据多年产业数字化研究&#xff0c;历经近半年时间&#xff0c;并综合近200位CIO调研与推荐意见&#xff0c;发布《2024年中国CIO数字化产品选型白皮书》&#xff0c;并推出企业CIO选型指南及可信产品名录。企企通凭借其优秀的采购数字化与供应…...

Linux中 “权限设置修改”

目录 一、权限 &#xff08;1&#xff09;权限三大类&#xff1a; &#xff08;2&#xff09;文件的权限&#xff1a; &#xff08;3&#xff09;目录的权限&#xff1a; &#xff08;4&#xff09;用户的角色&#xff1a; 二、文件的权限位 三、修改用户权限 &#xf…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...