将 fomantic-ui-css 与用于 VueJs 的 webpack 捆绑在一起

问题描述

我正在尝试使用 Vue-Cli 创建一个 VueJs 项目，并希望将 fomantic-ui-css 与它一起使用。我使用 npm 安装了 fomantic-ui，然后将其导入 main.js，但是当我运行该应用程序时，我收到来自 ReferenceError: jQuery is not defined 的 webpack 错误。

semantic.js?2583:503 Uncaught ReferenceError: jQuery is not defined
    at eval (semantic.js?2583:503)
    at Object../node_modules/fomantic-ui-css/semantic.js (chunk-vendors.js:1216)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1009)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1023)
    at __webpack_require__ (app.js:849)
eval @ semantic.js?2583:503
./node_modules/fomantic-ui-css/semantic.js @ chunk-vendors.js:1216
__webpack_require__ @ app.js:849
fn @ app.js:151
eval @ main.js:12
./src/main.js @ app.js:1009
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1023
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
sockjs.js?9be2:1609 GET http://192.168.1.101:8080/sockjs-node/info?t=1624957335646 net::ERR_CONNECTION_REFUSED

下面是我的配置的样子

main.js

import { createApp } from 'vue'
import App from './App.vue'

import 'fomantic-ui-css/semantic'
import 'fomantic-ui-css/semantic.css'

createApp(App).mount('#app')

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',$: 'jquery','window.jQuery': 'jquery',})
    ],entry: {
        app: './src/main.js'
    },output: {
        path: path.join(__dirname,'dist'),filename: 'bundle.js',publicPath: 'dist'
    },}

package.json

{
  "name": "test-app","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "core-js": "^3.6.5","vue": "^3.0.0"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","css-loader": "^5.2.6","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0","extract-text-webpack-plugin": "^3.0.2","fomantic-ui-css": "^2.8.8","jquery": "^3.6.0","webpack": "^4.1.0"
  },"eslintConfig": {
    "root": true,"env": {
      "node": true
    },"extends": [
      "plugin:vue/vue3-essential","eslint:recommended"
    ],"parserOptions": {
      "parser": "babel-eslint"
    },"rules": {}
  },"browserslist": [
    "> 1%","last 2 versions","not dead"
  ]
}

我在这里遗漏了什么？

解决方法

我犯的错误是创建了单独的 webpack 配置，我需要做的就是创建一个 vue.config.js 并将额外的 webpack 配置放入其中，如下所示。

let webpack = require('webpack')

module.exports = {
  configureWebpack: {
      plugins: [
          new webpack.ProvidePlugin({
              $: 'jquery',jquery: 'jquery','window.jQuery': 'jquery',jQuery: 'jquery'
          })
      ],entry: {
          app: './src/main.js'
      },}
}

它对我有用，没有做任何更多的改变。