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>