为何Vite配置的全局变量在Vue SFC模板插值中报错？

核心原因 #

1. 模板的类型检查规则：Vue单文件组件的模板会做TypeScript类型校验，模板里引用的变量默认必须是组件实例上下文（比如setup导出的变量、data中的属性）里存在的，TypeScript不知道你通过Vite注入了全局的__PRODUCT__，所以会抛出“属性不存在”的类型错误。

2. Vite define的工作机制：Vite的define配置是在构建阶段做字符串替换，把代码里的__PRODUCT__替换成"My Product"，但TypeScript在开发阶段的类型检查时，根本不知道这个替换逻辑，会把__PRODUCT__当成未声明的变量。

为什么script赋值后就管用？ #

当你在<script>里写let product = __PRODUCT__，然后模板用{{ product }}时：

• 虽然TypeScript也会对__PRODUCT__有疑问，但构建时Vite会把它替换成实际值；
• 而product是你在组件上下文里声明的变量，TypeScript能识别到它的存在（哪怕类型是any），所以模板引用product时不会触发类型错误。

更优雅的解决方式 #

不用绕弯子在script里中转，直接给TypeScript声明全局变量即可：
在项目的src目录下创建env.d.ts文件，添加以下代码：

declare const __PRODUCT__: string;

这样TypeScript就知道__PRODUCT__是全局存在的字符串变量，模板里直接用{{ __PRODUCT__ }}也不会报错了。

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