如何在 Vue-CLI 3 项目中全局声明 jQuery？
Posted
技术标签:
【中文标题】如何在 Vue-CLI 3 项目中全局声明 jQuery？【英文标题】：How do I globally declare jQuery inside a Vue-CLI 3 project? 【发布时间】：2019-05-20 22:47:58 【问题描述】：我在 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.js 和vue.config.js，没有build 或config 目录。
我尝试在我的main.js 文件中使用以下行全局设置 jQuery：
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery
但每次我重新加载页面时，都会收到以下消息：
jQuery 没有定义
所以，到目前为止，我使用的是 jQuery 的 CDN 版本，但我对这个解决方案并不放心。
我应该如何进行 Vue-CLI 3 项目？
提前谢谢你
【问题讨论】：
不要！像 Vue 这样的现代模板引擎的重点是不要使用像 jQuery 这样的遗留库。只是不要！ 问题是，我无法在 Vue 上下文中找到或使 vanilla js 包工作.. 你应该在每个你需要的 .js/.vue 的开头使用import jquery from jquery，然后是 jquery("#id").whatever)`
您也许可以将其添加到Vue() 并通过.vue 文件中的this.$jquery 访问它，您还没有尝试过。
【参考方案1】：
如果您使用的是 Jquery 插件，您应该在 main.js 中执行此操作：
/*
* If using Jquery plugins they will expect to be available in the global namespace,
* which isn’t the case when you import/require it. So manually assign jquery to
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;
【讨论】：
【参考方案2】：您可以使用 Vue 插件。这允许您向每个组件添加新属性。
在main.js
import Vue from 'vue';
import jQuery from 'jquery';
Vue.use(
install (V)
V.$jQuery = V.prototype.$jQuery = jQuery
)
那么你就可以在组件的任何地方使用jQuery了。
在MyComponent.vue
import Vue from 'vue'
export default
mounted ()
this.$jQuery('h1').text('Hello World')
Vue.$jQuery('h1').text('Hello World')
甚至是另一个 js 文件。
在util.js
import Vue from 'vue'
Vue.$jQuery('h1').text('Hello World')
【讨论】：
【参考方案3】：您可以继续 public/index.html 并将脚本标记添加到正文中，并带有指向您的 jquery 文件或 cdn 的路由。 如果你把它放在公共的 jquery 文件夹中，它看起来像：
<body>
<div id="app"></div>
<script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>
我不确定这是否正是您想要的，但它会使其在您的项目中全球可用。
【讨论】：
以上是关于如何在 Vue-CLI 3 项目中全局声明 jQuery？的主要内容，如果未能解决你的问题，请参考以下文章