在 nuxt 的 head 标签中包含自定义脚本

Question

我有一个想要包含在我的 nuxt 项目中的自定义脚本。

问题是，这个脚本需要在 加载 dom 之前包含在内。它包含此特定项目的覆盖。

我的资产文件夹由一个脚本子文件夹构成：

在我的 nuxt.config.js 文件中，我有这个：

export default {
  css: ["~/assets/css/main.scss"],
  head: {
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/aframe/1.0.4/aframe.min.js", 
        src: "_nuxt/assets/scripts/bundle.js", // this is the script that I'm trying to include
      },

在查看其他一些资产如何成功包含后，我添加了_nuxt/

在加载 dom 之前我们需要完成的所有事情都已经捆绑在文件中，即使它是非常规的，如果我们能够加载它，这会工作。 p>

我查看了有关此配置或实际 .vue 文件中的 head 属性的 nuxt 文档，但它讨论的是外部资源，而不是项目本地资源。

我如何正确地将这个文件包含在 nuxt 的头部？

另外，如果有一种适当的方法可以将此捆绑包的源代码与主要的 nuxt js 代码分开，以便它可以正确地通过 nuxt/tsc，我愿意接受它。

Answer 1

我使用@Ifaruki 在这个问题上发布的解决方案让它工作，但我看到他们昨天删除了它，所以我不能接受它作为正确答案。 @Ifaruki 如果您取消删除或重新回答，我会给您打勾。不知道你为什么删除它。

解决方案是在 nuxt 中使用 static directory。我没有意识到有一个静态文件夹，因为我从其他人那里继承了这个代码库，并且默认情况下 nuxt 项目生成器没有添加 static 文件夹，或者原始开发人员删除了它。

无论哪种方式，如果 nuxt 代码库的根目录中有一个 static 文件夹，则会将其映射到服务器根目录，这意味着您可以使用 url 访问该文件夹中的文件。在查看代码库时，我假设这将是 assets 文件夹，考虑到其他文件以这种方式提供，但是将 scripts 文件夹添加到 assets 不会使脚本文件夹可访问。考虑到文档中有一条关于静态文件夹读取的注释...

如果没有额外的配置，这个目录不能重命名。

...我假设资产的子文件夹具有类似的硬编码文件夹名称。不确定，不想通过代码潜水来弄清楚。

不管怎样，我在网站的根目录下创建了一个 static 文件夹，其中包含一个 js 子文件夹，将 bundle.js 文件移动到子文件夹中，并更新了我的 nuxt.config.js 文件以在头部包含 bundle 文件像这样：

注意 static 不在 head 值的路径中，静态文件夹名称本身不会在服务器根目录中公开，因此您需要将其关闭。

现在 bundle.js 文件按预期加载。从这里开始，我正在研究如何以一种更简洁、更少手动移动就位的方式添加这个文件，但这会让我暂时行动起来。

感谢@Ifaruki 的帮助！