将 fomantic-ui-css 与 VueJs 的 webpack 捆绑在一起答案

【问题标题】：Bundling fomantic-ui-css with webpack for VueJs将 fomantic-ui-css 与 VueJs 的 webpack 捆绑在一起
【发布时间】：2021-06-29 09:03:57
【问题描述】：

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

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"
  ]
}

我在这里错过了什么？

【问题讨论】：

标签： vue.js webpack semantic-ui fomantic-ui

【解决方案1】：

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

让 webpack = require('webpack')

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

它只是对我有用，没有做更多的改变。

【讨论】：