在Vue单文件组件中使用CDN引入的ScrollReveal报错如何解决？

CDN引入的第三方库默认会将自身挂载到window全局对象上，浏览器控制台可以直接调用是因为控制台的默认执行上下文就是window对象。而Vue单文件组件的script代码运行在独立的模块作用域中，直接调用ScrollReveal()时会优先查找模块内的局部变量，不会自动读取全局对象上的属性，因此会抛出函数不存在的错误。

• 最简单的方案是显式从window对象上取挂载的库实例，直接修改调用代码即可：

const sr = window.ScrollReveal()

• 如果项目多个组件都需要调用该库，不想每次都写window.前缀，可以根据你使用的打包工具做全局变量配置：
  • 若使用Vite，可在vite.config.js的define配置项中添加映射：

  export default defineConfig({
    define: {
      ScrollReveal: 'window.ScrollReveal'
    }
  })
  

  • 若使用Vue CLI，可在vue.config.js中配置configureWebpack的externals属性，声明该全局变量。
• 如果你用ESLint做代码校验，调用时出现no-undef报错，可以在ESLint配置文件的globals字段中添加ScrollReveal: true，标记该变量为合法全局变量即可。

注意：要保证Vue应用的挂载执行时机在ScrollReveal的CDN脚本加载之后，否则调用时window.ScrollReveal可能还未初始化。可以将Vue的打包产物引入脚本放在public/index.html中ScrollReveal的script标签之后，或者在组件的onMounted生命周期中再执行初始化逻辑，避免出现变量未定义的问题。

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