2

我有一个想要用 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

在 config.js 中添加 css 是可行的module.exports.head，但由于某种原因，添加 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] 的第一个数组元素，它返回未定义。

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

4

1 回答 1

3

在

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

于 2019-08-20T20:27:33.597 回答