VueJS中Uncaught ReferenceError: $ is not defined问题排查求助

这个问题我之前也碰到过，主要是Webpack的模块隔离机制和资源加载顺序在搞鬼，咱们一步步拆解原因和解决办法：

核心原因分析 #

• Webpack模块作用域限制：你在main.js里把jQuery挂到window上，但如果Semantic UI的JS代码在jQuery完成挂载前就执行了，它会找不到$——毕竟Webpack默认会把每个模块包裹在独立作用域里，不是所有代码都能直接访问window上的变量。
• Semantic UI加载时机错误：Semantic UI的JS依赖jQuery，如果它在jQuery之前被加载（不管是通过import还是CDN），初始化时就无法绑定到$上，后续自然调用失败。
• 缺少Webpack全局注入配置：Vue的Webpack模板默认不会自动把jQuery注入到所有模块，即便你挂了window.$，有些组件或第三方库可能还是无法直接识别$。

分步解决方案 #

1. 配置Webpack自动注入jQuery（最关键） #

找到项目根目录下的build/webpack.base.conf.js（Vue CLI 2的Webpack模板结构），做两处修改：

• 顶部引入webpack：

const webpack = require('webpack')

• 在module.exports的plugins数组中添加ProvidePlugin，让Webpack自动把jQuery注入到所有模块：

plugins: [
  // 其他插件...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  })
]

这个配置会让Webpack在每个模块里自动注入$和jQuery，不用手动挂window。

2. 确保Semantic UI在jQuery之后加载 #

如果是通过npm安装的Semantic UI，在main.js里调整加载顺序：

// main.js
// 先确保jQuery已被注入，再加载Semantic UI的样式和JS
import 'semantic-ui-css/semantic.min.css'
import 'semantic-ui-css/semantic.min.js'

如果是用CDN引入，在index.html里按顺序写：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入Semantic UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.js"></script>

3. 在Vue组件中正确调用Semantic UI方法 #

Vue组件的DOM需要先渲染完成才能调用Semantic UI的初始化方法，所以要放在mounted钩子中，配合$nextTick确保DOM就绪：

export default {
  mounted() {
    this.$nextTick(() => {
      // 现在可以安全调用Semantic UI的方法了
      $('.ui.rating').rating()
    })
  }
}

4. 重启开发服务器 #

修改Webpack配置后，必须重启npm run dev才能让配置生效，否则之前的修改不会起作用。

内容的提问来源于stack exchange，提问作者Enrique Bermúdez