javascript - 如何将 jQuery 添加到 VuePress 文件中

Question

我有一个项目想要使用 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] 的第一个数组元素，它将返回未定义。 p>

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

Answer 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/