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>
相关推荐
bigdata-rookie11 小时前
Java 反射
java·开发语言
能工智人小辰11 小时前
Java8 Swing实现计算器
开发语言
SccTsAxR11 小时前
[C语言]常见排序算法①
c语言·开发语言·经验分享·笔记·其他·排序算法
Monly2111 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
小桥风满袖11 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
超人不会飛12 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
怀旧,12 小时前
【C++】20. unordered_set和unordered_map
开发语言·c++
alibli12 小时前
一文学会CMakeLists.txt: CMake现代C++跨平台工程化实战
开发语言·c++·系统架构
艾小码12 小时前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js
艾小码13 小时前
还在手动加载全部组件?这招让Vue应用性能飙升200%!
前端·javascript·vue.js