index.html里怎么定义全局变量？
作者：袖梨
2026-07-27
在index.html中声明变量必须挂到window上并补充类型声明，否则Vue或TypeScript无法安全访问；需在global.d.ts中扩展Window接口，且变量须在Vue启动前挂载。
直接在 index.html 里用 <script> 声明变量，它默认就是全局的——但真正能被 Vue 或 TypeScript 安全访问的，必须挂到 window 上，否则会报错或类型不识别。
为什么 var myVar = 123 在 index.html 里不总是有效
因为现代构建工具（Vite / Webpack）会把 JS 模块化隔离，var 声明的变量只在当前 script 标签作用域内有效，组件里 myVar 是 undefined。真正可靠的方式是显式挂载：
<script>window.API_BASE = "https://api.example.com";</script>-
<script>window._jcq = [];</script>（注意下划线前缀常用于避免命名冲突） - 不要写
var _jcq = [];—— 这个变量无法从 Vue 组件中直接访问
Vue3 + TypeScript 下访问 window 变量要补类型声明
否则 window._jcq.push(...) 会报 TS2339：“Property '_jcq' does not exist on type 'Window & typeof globalThis'”。解决方法是在项目中加一个 global.d.ts 文件：
declare global { interface Window { _jcq: any[]; API_BASE: string; }}
这个文件必须被 TypeScript 加载到类型检查中（通常放在 src/ 下即可）。如果放错位置或没被识别，VS Code 里不报错但构建时仍会失败。
立即学习“前端免费学习笔记（深入）”；
打包后想改配置？别硬编码，用外部 .js 文件加载
把变量抽到单独脚本里，就能在部署后不重新打包直接修改。例如：
- 在
public/config.js里写：const Glob = { BASE_API: "https://prod.example.com" }; - 在
index.html <head>中引入：<script src="./config.js"></script> - 然后在任意地方用：
window.Glob.BASE_API
注意：不能省略 window. 前缀，也不能依赖 const Glob 的块级作用域——它只在 config.js 内部有效，必须手动挂到 window 才行，比如改成 window.Glob = { BASE_API: "..." };
最容易忽略的是类型声明和挂载时机：变量必须在 Vue 应用启动前就存在于 window 上，且 TypeScript 必须“知道”它存在。漏掉任意一环，运行时可能正常，但开发期报错或 IDE 不提示。
