Laravel项目中已定义的wmDefaults变量提示未定义问题求助

问题重现 #

在app.js顶部定义了变量：

var wmDefaults = {
    elemClass:'waitMe',
    effect : 'bounce',
    text : '',
    bg : 'rgba(255,255,255,0.7)',
    color : '#000',
    maxSize : '',
    waitTime : -1,
    textPos : 'vertical',
    fontSize : '',
    source : ''
};

app.js已添加到外部资源列表，但控制台执行console.log(wmDefaults)时出现错误：

VM2335:1 Uncaught ReferenceError: wmDefaults is not defined
    at <anonymous>:1:13

排查与解决步骤 #

• 模块作用域隔离（最常见原因）
  Laravel当前默认用Vite或Mix打包JS资源，这些工具会将每个JS文件当作ES模块处理。模块内部用var定义的变量属于模块局部作用域，不会自动挂载到window全局对象，控制台的全局上下文自然访问不到。
  解决：将变量显式挂载到window：

  window.wmDefaults = {
      elemClass:'waitMe',
      effect : 'bounce',
      text : '',
      bg : 'rgba(255,255,255,0.7)',
      color : '#000',
      maxSize : '',
      waitTime : -1,
      textPos : 'vertical',
      fontSize : '',
      source : ''
  };
  

• 脚本加载顺序问题
  检查HTML中app.js的加载属性：如果使用了defer、async或type="module"，脚本可能在控制台执行代码之后才加载完成。
  验证：在app.js末尾添加console.log('wmDefaults loaded:', wmDefaults)，刷新页面看控制台是否输出该信息；或者等待页面完全加载后（比如触发DOMContentLoaded事件）再执行控制台命令。

• 代码压缩混淆导致变量名变更
  生产环境打包时，工具会压缩代码并混淆变量名，wmDefaults可能被替换成短变量名。
  验证：切换到开发环境（执行npm run dev）测试，如果开发环境正常，需在打包配置中保留该变量名：

  • Vite：在vite.config.js的build.rollupOptions.output中配置globals，或通过terser插件设置保留变量名；
  • Mix：在webpack.mix.js中配置terser的keep_fnames选项。

• 代码未被执行
  检查app.js中是否存在条件逻辑（如if判断、异步函数包裹）导致wmDefaults的定义代码未被执行。可以在定义代码后添加console.log('wmDefaults defined')，确认控制台是否输出该内容，排查代码执行路径。

• 浏览器缓存问题
  浏览器可能缓存了旧版本的app.js，新代码未生效。强制刷新页面（Ctrl+F5），或在开发者工具Network面板勾选「Disable cache」后重新测试。

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