首页 > 其他分享 >vue + vite 在index.html中使用环境变量

vue + vite 在index.html中使用环境变量

时间:2023-07-31 10:33:18浏览次数:40  
标签:index vue plugin useHtmlLoader html vite

  1. npm install vite-plugin-html -D
  2. vite.config.js
import { createHtmlPlugin as useHtmlLoader } from 'vite-plugin-html'
useHtmlLoader({
    inject: {
    data: {
      title: VITE_APP_BASE_URL,
    },
  },
}),
  1. index.html可以使用啦!!!
<p class="url">
   <%= title %>
</p>

标签:index,vue,plugin,useHtmlLoader,html,vite
From: https://www.cnblogs.com/tangshidedabenniao/p/17586820.html

相关文章

  • reactor.core.Exceptions$ErrorCallbackNotImplemented: java.lang.IndexOutOfBoundsE
    生产环境好好的,突然前端请求全部跨域,请求500。gateway报错。reactor.core.Exceptions$ErrorCallbackNotImplemented:java.lang.IndexOutOfBoundsException:Index:0,Size:0。所有的接口都报。原因由于gateway也集成了springboot-admin,开启了应用程序的actuator端点,导致......
  • vue2集成tinymce富文本编辑器,添加本地资源解决加载慢问题
     组件源码版本licensetinymce地址4.9.3MIT示例项目一源码地址:gitee1.封装组件<template><div:class="{fullscreen:fullscreen}"class="tinymce-container":style="{width:containerWidth}"><textarea:id="tinymc......
  • vue3
    一、vue3最终响应式原理letperson={name:'张三',age:15,}//我们管p叫做代理数据,管person叫源数据constp=newProxy(person,{//target代表的是person这个源对象,propName代表读取或者写入的属性名get(target,propName){console.log('有人......
  • Vue的学习笔记
    一、弹窗的初始化1.弹窗打开的时候想要对弹窗进行一些初始化数据(比如从表默认选中第一行),可以用@opened绑定方法进行操作,详见:https://element.eleme.cn/#/zh-CN/component/dialog  二、显示与不显示:v-show视频学习地址(03-key,v-show,computed|【入门篇】从零开始学习Vue3核......
  • 【vue】vue路由传参的三种方式
    【vue】vue路由传参的三种方式原文链接:https://blog.csdn.net/liyunkun888/article/details/83269343前言vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为params传参和query传参,而params传参又可分为在url中显示参数和不......
  • vue3
    1、ref深拷贝视图层更新不改变源数据constnum=1constrefNum=ref(num)constclick=()=>{refNum++//refNum已经改变了,但原数据num不变}2、toRef源数据改变不更新视图3、toRefs传入一个响应式对象constobj=reactive{name:"iwen",age:19}//取值为obj.na......
  • 前端系列21集-vue3,轨迹展示
    AMap.InfoWindow<template><div><div:style="customStyle"class="custom-box"><!--Yourcontenthere--></div></div></template><scriptsetup>import{ref,reactive......
  • 前端HTML基础
    当使用HTML创建网页时,你需要了解以下几个关键概念和常用标签:基本的文档结构:一个HTML文档从 <html> 标签开始,然后分为两个主要部分:<head> 标签:用于放置与网页相关的元数据和引用的外部资源,如标题、样式表和脚本文件链接等。<body> 标签:用于放置网页的实际内容,包括文......
  • Vue3中使用TypeScript封装axios遇到的问题(AxiosRequestConfig)
    如果您有更好的解决方法,欢迎评论区评论。版本"dependencies":{"axios":"^1.0.0","vant":"^4.6.3","vue":"^3.3.4","vue-router":"^4.2.4","vuex":&quo......
  • vue移动端适配
    1.安装[email protected]是可配置可伸缩布局方案,主要是将1rem设为viewWidth/10。  postcss-pxtorem是postcss的插件,用于将像素单位生成rem单位。2.在vue.config.js中引入module.exports={css:{lo......