Vite 4.2 HTML环境变量替换在Vue3中失效如何解决？

核心结论 #

TypeScript并非问题根源，Vite的HTML变量替换逻辑与TS无关。

修复步骤 #

1. 确认入口HTML位置
   Vite仅自动处理项目根目录下的index.html中的环境变量替换。若你的入口HTML放在src/或其他子目录，需在vite.config.ts中配置入口路径：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     build: {
       rollupOptions: {
         input: './src/index.html' // 替换为你的实际入口HTML路径
       }
     }
   })
   

2. 排查Vite配置干扰

   • 检查envPrefix配置：默认值为'VITE_'，内置变量（如MODE、BASE_URL）不受该配置限制，但如果手动设置了envPrefix: ''或其他值，可能导致异常，建议保持默认。
   • 检查transformIndexHtml钩子：若你在配置中自定义了该钩子，需确保逻辑未覆盖Vite默认的环境变量替换行为。

3. 清除缓存并重启服务

   • 停止当前Vite服务
   • 删除项目根目录下的.vite缓存文件夹
   • 重新执行npm run dev/yarn dev启动服务

4. 验证变量引用格式

   • 内置变量如MODE直接写%MODE%
   • 自定义环境变量需以VITE_开头，在HTML中写%VITE_RAGIONE_SOCIALE%，确保拼写完全正确

内容的提问来源于stack exchange，提问作者Uncoke