如何在Vue-CLI 3项目中全局声明jQuery?

问题描述 投票:3回答:1

我在SO和其他地方看到了很多关于这个问题的提问,但到目前为止我还没有找到答案。

有一点背景,我在一个用 "旧 "命令创建的Vue项目上建立了一个SPA网站。我不记得是哪一个了,但它看起来像下面这样。

vue init webpack <my project>

我最近意识到Vue -CLI 3对我来说更容易维护,更新和改进,因为各种背景原因,所以我安装了 @vue/cli创立了一个新的项目,并开始将旧项目中的文件复制粘贴到新项目中。

旧项目有一个 build 目录里有各种webpack的配置文件,我需要jQuery全局地设置一个我想使用的包,所以我在Webpack的 "基础 "配置文件中添加了以下内容。

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}),

然而,在新项目中,我现在的配置文件是 babel.config.jsvue.config.js 在项目的根部,不存在 build 也不 config 目录。

我试着在我的目录下设置全局的jQuery,并在我的 main.js 文件。

import jQuery from 'jquery'

window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery

但每次我重新加载页面时,我都会收到以下信息:

jQuery is not defined

所以,到目前为止,我使用的是CDN版的jQuery,但我觉得这个方案不放心。

我应该如何进行Vue-CLI 3项目?

先谢谢你

javascript jquery vue.js webpack vue-cli-3
1个回答
0
投票

你可以在publicindex.html上添加脚本标签,并在正文中添加到你的jquery文件或cdn.If你把它放在公共的jquery文件夹中,它看起来像。

<body>
    <div id="app"></div>
    <script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>

我不知道这是否是你想要的,但它会使它在你的项目中全球可用。

© www.soinside.com 2019 - 2024. All rights reserved.