如何在VueJS组件中正确引入jQuery与自定义<script>代码？

报错与加载异常的核心原因 #

你遇到的编译报错、组件加载失败，本质是把带副作用的<script>标签直接写在了Vue组件的<template>块内：

• Vue的模板编译器仅负责解析渲染类的UI标签，会自动过滤<script>这类带副作用的非UI标签，既不会执行标签内的逻辑，还会直接触发编译规则报错，中断组件的挂载流程。
• 写在模板里的脚本不会被浏览器解析执行，相关逻辑缺失就会进一步导致组件运行时的依赖找不到，出现加载异常。

正确接入的实现步骤 #

1. 梳理jQuery的引入路径 #

• 优先通过项目依赖方式引入jQuery：执行npm install jquery安装依赖后，在项目入口文件中全局挂载：window.$ = window.jQuery = require('jquery')，确保整个项目运行时可以直接通过window.$调用jQuery方法，不需要在组件内重复写script标签引入。
• 绝对禁止在组件的<template>块内书写任何<script>标签。

2. 将原脚本逻辑迁移到组件生命周期内 #

原来写在页面<script>标签里的DOM操作、事件绑定、第三方初始化逻辑，全部迁移到组件的mounted生命周期钩子中执行，因为这个阶段组件对应的DOM已经完成挂载，可以被jQuery正常选中操作。
示例代码结构：

<template>
  <!-- 模板块仅书写纯UI结构，不放置任何带副作用的标签 -->
  <div class="page-wrapper">
    <!-- 业务UI内容 -->
    <div id="widget-container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 等待组件DOM完全渲染后执行逻辑
    this.$nextTick(() => {
      // 执行原页面中的jQuery绑定逻辑
      window.$('#widget-container').on('click', () => {
        // 对应原示例中的业务逻辑
      })

      // 动态引入需要的第三方初始化脚本，替代原来写在模板里的script标签
      const thirdPartyScript = document.createElement('script')
      // 脚本地址替换为你需要引入的实际资源路径
      thirdPartyScript.onload = () => {
        // 脚本加载完成后执行原来的内联初始化逻辑
        window.widgetConfig = {
          // 对应原配置项
        }
      }
      document.body.appendChild(thirdPartyScript)
    })
  },
  beforeUnmount() {
    // 组件销毁时清理副作用，避免内存泄漏与逻辑冲突
    // 解绑jQuery绑定的全局事件
    window.$('#widget-container').off('click')
    // 移除动态插入的第三方DOM元素
    if (document.querySelector('#widget-container iframe')) {
      document.querySelector('#widget-container iframe').remove()
    }
  }
}
</script>

常见踩坑点排查 #

• 不要在created钩子中执行jQuery相关操作，这个阶段组件DOM还未挂载，jQuery选择器无法匹配到对应元素，会导致逻辑失效。
• 确保jQuery挂载完成后再执行依赖jQuery的业务逻辑，避免出现$ is not defined的运行时报错。
• 组件卸载时必须清理动态绑定的事件、插入的第三方DOM，否则下一次组件重新挂载时会出现逻辑冲突，引发加载异常。

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