如何将 jQuery 添加到 VuePress 文件中

Posted 2023-02-22

【中文标题】如何将 jQuery 添加到 VuePress 文件中

【英文标题】：How to add jQuery into a VuePress file

【发布时间】：2019-03-21 01:22:54

【问题描述】：

我有一个项目，我想用 VuePress 记录，我有一个需要 jQuery 运行的小代码。我知道您可以添加内联脚本标签并将代码放入其中，但我似乎无法添加 jQuery。这是文件夹结构和我尝试过的：

docs
   .vuepress
   -- dist
   -- public
      -- css
      -- js
         -- jquery-3.3.1.min.js
         -- scripts.js
   -- config.js
   components.md

在 components.md 的末尾添加了以下内容：

<script src="/js/jquery-3.3.1.min.js"></script> 

下面是在脚本标签中添加jquery时的错误：

 Module not found: Error: Can't resolve '../../../../../../js/jquery-3.3.1.min.js?vue&type=script&lang=js&' in C:/Users/../docs
 @ ./node_modules/vuepress/lib/app/.temp/routes.js
 @ ./node_modules/vuepress/lib/app/app.js
 @ ./node_modules/vuepress/lib/app/clientEntry.js
 @ multi ./node_modules/vuepress/lib/app/clientEntry.js

在 module.exports.head 的 config.js 中添加 css 有效，但由于某种原因添加 javascript 不起作用（添加了 jquery，但有时它有效，但大多数时候无效）。这是我在 config.js 中尝试过的

head: [
["link", rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap reboot.css"  ],
["link", rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap-grid.css"],
["link",  rel: "stylesheet", href: "/css/bootstrap-custom.css" ],
["link",  rel: "stylesheet", href: "/css/style.css" ],
["script",  src: "/js/jquery-3.3.1.min.js" ],
["script",  src: "/js/scripts.js" ]
]

编辑：我进行了更多测试，显然，即使导入了脚本，我也无法选择我想要选择的元素。例如 $('.my-elements') 返回一个空选择器。另一方面，document.getElementsByClassName('my-elements') 可以工作并将我想要的元素显示为第一个数组元素，但是如果我想选择最后带有 [0] 的第一个数组元素，它将返回 undefined。

我尝试使用上面的 2 个函数在控制台中选择元素。相同的功能在控制台中起作用，但在脚本中不起作用，这很奇怪。

【问题讨论】：

“有时有效，但大多数时候无效”是什么意思？它似乎是在 jquery 加载之前执行的脚本。通常用 $( document ).ready(function() );

解决

是的，我忘记了，但即使我添加了它，它仍然不起作用。至于我的意思，我认为它在我导入脚本时工作过一次，但到目前为止再也没有。我测试了一下，显然，即使导入了脚本，我也无法选择我想要选择的元素。例如 $('.my-element') 返回一个空选择器。 document.getElementsByClassName('my-element') 可以工作并显示我想要的元素，但是如果我想选择第一个数组元素，最后带有 [0]，它会返回 undefined。

在头部分的 config.js 中添加它。见：vuepress.vuejs.org/config/#head

【参考方案1】：

在

.vuepress/config.js

添加脚本

module.exports = 
    head: [
        ['script', src: 'https://code.jquery.com/jquery-3.4.1.min.js']
    ]

关于头部配置的更多文档

https://vuepress.vuejs.org/config/#head

jQuery CDN

https://code.jquery.com/