Vue3通过CDN引入外部原生JS库时QRCode未定义问题求助

完全可以通过public/index.html引入原生JS库，你遇到的'QRCode' is not defined报错主要有两个原因：ESLint未识别全局变量，或是在DOM元素挂载前就执行了库的初始化代码。以下是具体解决方法和示例：

一、针对QRCodeJS的修复步骤 #

1. 保持public/index.html的CDN引入不变 #

<!-- public/index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

2. 组件中正确使用QRCode #

需要确保两个关键点：等待DOM挂载完成、让ESLint识别全局变量，两种实现方式选其一即可：

方式1：声明全局变量（解决ESLint报错）

<template>
  <!-- 确保存在对应ID的DOM元素 -->
  <div id="qrcode"></div>
</template>

<script setup>
/* 告诉ESLint QRCode是全局变量，避免no-undef报错 */
/* global QRCode */
import { onMounted } from 'vue'

// 组件挂载后再初始化QRCode，确保DOM元素已存在
onMounted(() => {
  new QRCode('qrcode', {
    text: 'https://www.example.com',
    width: 128,
    height: 128
  })
})
</script>

方式2：直接从window对象获取（无需额外声明）

<template>
  <div id="qrcode"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // CDN引入的库默认挂载到window对象上，直接访问即可
  const QRCode = window.QRCode
  new QRCode('qrcode', 'https://www.example.com')
})
</script>

二、通用方案（适用于任意原生JS库） #

以引入jQuery为例，步骤完全一致：

1. 在public/index.html中引入CDN：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 组件中使用：

<template>
  <div id="test">测试文本</div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 通过window.$访问全局jQuery对象
  window.$('#test').css('color', 'red')
})
</script>

核心注意事项 #

• 所有依赖DOM的库初始化操作，必须放在onMounted钩子中执行，确保目标DOM元素已渲染完成
• 通过CDN引入的库默认会挂载到全局window对象上，直接通过window.xxx即可访问
• 若遇到ESLint未定义变量的报错，要么用/* global 变量名 */声明，要么直接使用window.变量名访问

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