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

一、设置配置文件

javascript 复制代码
// .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'

二、安装插件

bash 复制代码
npm i create-html-plugin -D

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

javascript 复制代码
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')
      }
    }
  }
})

四、使用

html 复制代码
    <title><%= systemConfig.tabTitle %></title>
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu10 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu10 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu10 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu11 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript