一、设置配置文件

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'

二、安装插件

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')}}}
})

四、使用

    <title><%= systemConfig.tabTitle %></title>