首页 > 其他分享 >vite给HTML注入变量

vite给HTML注入变量

时间:2024-03-19 13:57:04浏览次数:23  
标签:变量 plugin html HTML mode getViteEnv vite

安装插件:vite-plugin-html

 

npm install vite-plugin-html -D

在 vite.config.js 中配置

 

# vite.config.js

    ***

    import { defineConfig, loadEnv } from "vite";
    import { createHtmlPlugin } from "vite-plugin-html";


    const getViteEnv = (mode, target) => {
      return loadEnv(mode, process.cwd())[target];
    };

    export default ({ mode }) =>
      defineConfig({
        plugins: [
          vue(),
          createHtmlPlugin({
            inject: {
              data: {
                logo: getViteEnv(mode, "VITE_APP_LOGO"),
                title: getViteEnv(mode, "VITE_APP_TITLE"),
              },
            },
          }),
        ],

    ***

    });
inject > data 里面就是我们的数据


在 index.html 中使用变量

 <link rel="icon" href="<%= logo %>">
    <title><%= title %></title>

 




标签:变量,plugin,html,HTML,mode,getViteEnv,vite
From: https://www.cnblogs.com/yeminglong/p/18082594

相关文章

  • HTML表单标签详解:如何用HTML标签打造互动网页?
    在互联网的世界中,表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物,表单都扮演着至关重要的角色。在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要用到表单标签。HTML提供了一系列的表单标签,使得开发者能够轻松地创建出功能丰富的表单。今天......
  • Linux系统(四)- 进程初识 | 环境变量 | 进程地址空间
    ~~~~前言冯诺依曼体系结构(重要)总览CPU工作方式什么是指令集?CPU为什么只和内存打交道(数据交换)?木桶效应:在数据层面的结论程序运行为什么要加载到内存?进一步理解计算机体系结构操作系统(operatorsystem)(重要)什么是操作系统为什么要有操作系统操作系统怎样进行管理的先描述......
  • 【20.2】Django框架Form组件之渲染HTML代码
    【一】引入forms组件只会帮我们渲染用户输入的标签(input/select...)【二】书写forms组件forms.pyfromdjangoimportforms#定义form类classMyForm(forms.Form):#username:字符串类型最小三位,最大八位username=forms.CharField(max_length=8,min......
  • HTML+CSS+JS实现一个图书管理的登录跳转,做的花里胡哨,当娱乐即可。
    目录1、大二上学期的一个小作业2、页面展示3、进入主页可以看到书籍,这个页面是参照某个博主写的,忘记是哪个了,好久了。4、点击右边的搜索框,会跳转到我写的另一个页面,这里面的都是固定的,不是灵活的,因为当时只学了web而已。5、获取源码地址1、大二上学期的一个小作业2、......
  • 前端基础之HTML进阶
    表格标签只要是展示数据,一般都可以使用表格标签<body><tableborder="1"cellpadding="5"cellspacing="5>#border:为表格添加外边框#cellpadding:调整字体离边框距离#cellspacing:调整内边框离外边框的距离<thead>表头(字段信息)......
  • 前端基础之HTML标签基础
    HTML简介什么是HTML站在显示文本内容的角度去看,浏览器与word的原理一样,我们可以将浏览器当成一个网页版的只读word,浏览器也必须有一套自己能识别的标记文本的规范,该规范被称为HTML,HTML全称是超文本标记语言(HyperTextMarkupLanguage)。“超文本”指的是用超链接的方法,将各种......
  • html小练
    面试题:行内元素有哪些?块级元素有哪些?空(void)元素有哪些?面试题:页面导入样式时,使用link和@import有什么区别?面试题:title与h1的区别、b与strong的区别、i与em的区别?面试题:img标签的title和alt有什么区别?面试题:png、jpg、gif这些图片格式解释一下,分别什么......
  • JavaScript学习笔记2: js书写语法及变量
    JS书写语法以及变量变量声明变量<style>vara=20;a="张三";//js是一门弱类型语言,变量可以存放不同类型的值</style>几种不同的变量声明方式varvar定义的是全局变量在代码块中声明的变量,在代码块外也可以访问可以重复定义<style>{v......
  • html--机器人
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"......
  • html--蝴蝶
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>蝴蝶飞舞</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.c......