如何使 Vue 从 assets 文件夹中导入文件，而不是 index.html 中的硬编码脚本标签

Question

我有一个非常简单的结构，想导入来自 cdnjs.com 的资产。

基本上，某些第三方库需要这些资产，但问题是当我下载并将所有文件放入 src/assets/lib 并导入它们时它不想导入它们

main.js:

import './assets/lib/jquery.min.js'

我的应用程序停止工作并说没有定义 jQuery，但是当我在 index.html 中导入它们时一切都很好：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

详细的错误堆栈：

Uncaught ReferenceError: jQuery is not defined
    at eval (amalia.js.min.js?c1e6:27)
    at Object../src/assets/amalia/build/js/amalia.js.min.js (app.js:1362)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Videoplayer/AmaliaPlayer.vue?vue&type=script&lang=js&:2)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Videoplayer/AmaliaPlayer.vue?vue&type=script&lang=js& (app.js:1010)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (AmaliaPlayer.vue?6fc3:1)
    at Module../src/components/Videoplayer/AmaliaPlayer.vue?vue&type=script&lang=js& (app.js:1688)

我需要位于 src/assets 文件夹中的这些资产，因为我想构建一个 SFC 以便在我的项目中进一步导入

我也尝试设置 window.jQuery，但似乎这不是最好的方法，所以真的需要你们的帮助 :)

Answer 1

经过2个小时的战斗，我找到了解决方案：

npm i jquery --save

// vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}