Vite配置环境变量以及动态更新html数据

一、设置配置文件

// .env
// 公共配置文件,总是生效
VITE_BASE_API_URL='http://localhost:3000'// .env.development
VITE_BASE_API_URL='/api'
VITE_TAB_TITLE='development title'// .env.production
VITE_BASE_API_URL='/api'
VITE_TAB_TITLE='production title'

二、安装插件

npm i create-html-plugin -D

三、在Vite.config.ts中设置获取环境变量

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { createHtmlPlugin } from 'vite-plugin-html'// 获取环境变量文件中的键值对
const getViteEnv = (mode: string, key: string) => {return loadEnv(mode, process.cwd())[key]
}// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {console.log(getViteEnv(mode, 'VITE_TAB_TITLE'))return {plugins: [vue(),// html插件,负责更新不同环境下的title等数据createHtmlPlugin({inject: {data: {systemConfig: {tabTitle: getViteEnv(mode, 'VITE_TAB_TITLE')}}}})],resolve: {alias: {'@': resolve(__dirname, 'src')}}}
})

四、使用

    <title><%= systemConfig.tabTitle %></title>

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

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

相关文章

GitStack详细配置与使用指南

1.引言 GitStack是一个功能强大的Git服务器管理工具,专为Windows环境设计。它提供了一个用户友好的Web界面,使得在Windows服务器上管理Git仓库变得简单高效。本文将详细介绍GitStack的安装、配置和使用方法,帮助您快速搭建自己的Git服务器。 2.GitStack安装 2.1 系统要求 Wi…

罗剑锋的C++实战笔记学习(一):const、智能指针、lambda表达式

1、const 1&#xff09;、常量 const一般的用法就是修饰变量、引用、指针&#xff0c;修饰之后它们就变成了常量&#xff0c;需要注意的是const并未区分出编译期常量和运行期常量&#xff0c;并且const只保证了运行时不直接被修改 一般的情况&#xff0c;const放在左边&…

解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

异常 当打开Docker Desktop时候&#xff0c;启动docker引擎时&#xff0c;提示 加粗样式文本信息 Docker Desktop - WSL distro terminated abruptly A WSL distro Docker Desktop relies on has exited unexpectedly. This usually happensas a result of an external entit…

Vue2基础 14:自定义指令

自定义指令 1 函数式1.1 案例--v-text放大10倍 2 对象式2.1 案例--v-fbind默认获取焦点&#xff08;函数式&#xff09;2.2 案例--v-fbind默认获取焦点&#xff08;对象式&#xff09; 3 自定义指令容易犯的错4 全局指令写法&#xff08;参考过滤器写法&#xff09;&#xff1a…

零基础开始学习鸿蒙开发-读书app简单的设计与开发(我的消息)

目录 1.新建一个MyMessage页面 2.确定布局方式,显然我们用线性布局会比较好 3.具体布局就不详细图标大小调整就不做详细介绍了 4.给我的消息添加路由跳转。 5.如图效果 1.新建一个MyMessage页面 // Index.ets @Entry @Component export struct find {@State message: str…

Go 依赖注入设计模式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

《昇思25天学习打卡营第6天 | mindspore 函数式自动微分常见用法》

1. 背景&#xff1a; 使用 mindspore 学习神经网络&#xff0c;打卡第6天&#xff1b; 2. 训练的内容&#xff1a; 使用 mindspore 的函数式自动微分常见用法&#xff1b; 3. 常见的用法小节&#xff1a; 函数式自动微分支持一系列常用的函数 3.1 损失函数&#xff1a; …

系统重装

待更新 重置win11 双系统删除其中一个&#xff0c;并将格式化后的空间并入

HTTP请求详解及其在嵌入式系统中的应用

前言 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网中最广泛使用的应用层协议&#xff0c;用于客户端和服务器之间的数据传输。了解HTTP请求的工作原理对于开发网络应用和嵌入式系统中的网络通信至关重要。本文将详细介绍HTTP请…

跟着峰哥学java 第四天 商品分类 前后端显示

1.后端 1.1mybatis-plus分页查询配置 在商品热卖数据中&#xff0c;只让其显示八条数据 将要使用分页 也就是service.page方法 此时需要配置 mp拦截器 Configuration public class MybatisPlusConfig {Beanpublic PaginationInterceptor paginationInterceptor() {return …

模型训练之数据集

我们知道人工智能的四大要素&#xff1a;数据、算法、算力、场景。我们训练模型离不开数据 目标 一、数据集划分 定义 数据集&#xff1a;训练集是一组训练数据。 样本&#xff1a;一组数据中一个数据 特征&#xff1a;反映样本在某方面的表现、属性或性质事项 训练集&#…

星辰宇宙动态页面vue版,超好看的前端页面。附源码与应用教程(若依)

本代码的html版本&#xff0c;来源自“山羊の前端小窝”作者&#xff0c;我对此进行了vue版本转换以及相关应用。特此与大家一起分享~ 1、直接上效果图&#xff1a; 带文字版&#xff1a;文字呼吸式缩放。 纯净版&#xff1a; 默认展示效果&#xff1a; 缩放与旋转后&#xf…

mysql5.6的安装步骤

1.下载mysql 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 在这里我们下载zip的包 2.解压mysql包到指定目录 3. 添加my.ini文件 # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-configurat…

tongweb+ths6011测试websocket(by lqw)

本次使用的tongweb版本7049m4&#xff0c;测试包ws_example.war&#xff08;在tongweb安装目录的samples/websocket下&#xff09;&#xff0c;ths版本6011 首先在tongweb控制台部署一下ws_example.war,部署后测试是否能访问&#xff1a; 然後ths上的httpserver.conf的參考配…

腾讯centos mysql安装

腾讯centos mysql安装 腾讯云提供了一系列的云计算服务&#xff0c;包括操作系统、数据库、服务器等。在腾讯云上安装CentOS操作系统和MySQL数据库可以按照以下步骤进行&#xff1a; 登录腾讯云控制台&#xff08;登录 - 腾讯云&#xff09;。在控制台页面上方的搜索框中输入…

vue数组变化的侦测***

数组变化的侦测 变更方法 vue能够侦听响应式数组的变更方法&#xff0c;并在他们被调用时触发相关更新。这些变更方法包括&#xff1a; push()pop()shift()unshift()splice()sort()reverse() 替换一个数组 变更方法&#xff0c;顾名思义&#xff0c;就是会对调用他们的原数组进…

Vue 路由传参 query方法 bug 记录

问题描述 vue 路由传参 踩坑 this.$router.push({path: "xxxxxxx",query: {opportunity_id:row.opportunity_id,constructor:row.constructor,},});解决方案&#xff1a; 上述方法传入新页面时&#xff0c;访问的 this.$route.query 会有bug 每一次刷新都会在最后一…

DNS服务器

DNS服务器 一、DNS简介&#xff1a; DNS&#xff08;Domain Name System&#xff09;是一种用于将域名解析为IP地址的系统。 在DNS中&#xff0c;正向解析将域名转换为IP地址&#xff0c;而反向解析将IP地址转换为域名。正向解析是DNS系统最常用的解析方式&#xff0c;它允许…

本地部署到服务器上的资源路径问题

本地部署到服务器上的资源路径问题 服务器端的源代码的静态资源目录层级 当使用Thymeleaf时&#xff0c;在templates的目录下为返回的html页面&#xff0c;下面以两个例子解释当将代码部署到tomcat时访问资源的路径配置问题 例子一 index.html&#xff08;在templates的根目录…

VBA初学:零件成本统计之三(获取材料外协的金额)

第三步&#xff0c;从K3的数据库中获取金额 我这里是使用循环&#xff0c;通过任务单号将金额汇总出来&#xff0c;如果使用数组的话&#xff0c;还要按任务单写GROUP&#xff0c;还要去对应&#xff0c;不如循环直接一点 获取材料和外协金额的表格Sub getje()Dim rowcount A…