javascript - How to make Vue import files from assets folder instead of hardcoded script tags inside of index.html
问题描述
I have a very simple structure and want to import assets that come from cdnjs.com.
Basically, those assets required for some third-party libraries, but the issue is it doesn't want to import them when I download and put all of the files inside of src/assets/lib and import them like
main.js:
import './assets/lib/jquery.min.js'
My application stops working and says that jQuery is not defined, but when I import them inside of index.html everything is fine:
<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>
Detailed stack of error:
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)
I need those assets located in src/assets folder because I want to build an SFC for further import in my projects
I also tried to set window.jQuery but seems like it's not the best approach so really want your help guys :)
解决方案
经过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'
})
]
},
}
推荐阅读
- mdx - MDX - 如何将层次结构的成员呈现为多列
- ruby-on-rails - Rails expect(controller).not_to have_received(:get_from_database) 没有按预期工作
- google-ads-api - 如何在谷歌广告活动中使用 Firebase 动态链接
- java - 带有 32 字节密钥的 Java 密码 AES/CBC/PKCS5Padding
- javascript - 使用假的 rest api 提交表单并发出 post 请求
- java - 使用 Java/Selenium 从 Blob URL 下载 pdf 文件
- python - python socket:在两台计算机之间发送文件
- nestjs - 如何在 Nest.js 中为 prc 配置中间件
- docker - 打开容器cli时docker执行命令
- excel - 如何使用 Range(cells..) 而不是 range("A1...) 清除内容