安装语法依赖

npm install vite-plugin-ejs -D

配置暴露数据

vite.config.js文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { ViteEjsPlugin } from 'vite-plugin-ejs'const ejsData = {// ejs读取环境变量ENV: loadEnv(process.env.VITE_USER_NODE_ENV, process.cwd(), ''),// CDN外链，ejs会插入到index.html中CDNs: {css: ["https://unpkg.com/animate.css@4.1.1","https://unpkg.com/bootstrap@5.3.1/dist/css/bootstrap.min.css","https://unpkg.com/bootstrap-icons@1.10.0/font/bootstrap-icons.css"],js: ["https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js","https://unpkg.com/bootstrap@5.3.1/dist/js/bootstrap.min.js"]}
}// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx(),ViteEjsPlugin(ejsData)],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

看到ViteEjsPlugin(ejsData)了吗，就是这个方法，把你定义的ejsData变量暴露到了index.html文件

使用数据

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><link rel="icon" href="/logo.png"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%= ENV.VITE_APP_TITLE %></title><% for (let path of CDNs.css) { %><link href="<%= path %>" rel="preload" as="style" /><link href="<%= path %>" rel="stylesheet" /><% } %></head><body><div id="app"></div><script type="module" src="/src/main.js"></script><% for (let path of CDNs.js) { %><script defer src="<%= path %>"></script><% } %></body>
</html>