如何在Qwik builder.io中声明、赋值并调用window全局变量？

浏览器环境下的全局挂载与调用 #

如果是纯浏览器项目，直接在入口文件（比如main.js/main.ts）里把属性挂载到window上就行，其他文件能直接调用：

// 入口文件里挂载全局属性
window.myGlobalData = { name: 'test', value: 123 };

// 任意项目文件里直接调用
console.log(window.myGlobalData.name); // 输出test

要是用TypeScript，得补个类型声明避免TS报错——在src目录下建个global.d.ts文件：

interface Window {
  myGlobalData: {
    name: string;
    value: number;
  };
}

这样TS就能识别window上的自定义属性了。

Node.js/SSR环境的兼容处理 #

服务端渲染或者Node.js环境里没有window对象，直接操作会报错，必须先做环境判断：

// 挂载全局属性时先判断环境
if (typeof window !== 'undefined') {
  window.myGlobalData = 'server-safe value';
}

调用的时候也要先判断：

let targetData;
if (typeof window !== 'undefined') {
  targetData = window.myGlobalData;
}

用Vue/React这类SSR框架的话，直接在客户端生命周期钩子（比如Vue的onMounted、React的useEffect）里操作window就行，这些钩子只会在客户端执行，不用额外判断。

常见错误排查 #

• 确认入口文件加载顺序：你的全局挂载代码必须在其他业务代码之前执行，比如Webpack的entry配置要指向正确的入口文件。
• 别在服务端逻辑里碰window：比如Next.js的getServerSideProps、Vue的serverPrefetch这类服务端运行的代码里，绝对不能调用window。
• 模块隔离问题：ES模块有自己的作用域，直接声明的变量不会自动变成全局，必须显式挂载到window上才行。

内容的提问来源于stack exchange，提问作者Mark Joseph Judaya