在 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 加载之前我们需要发生的所有事情都已经捆绑在文件中，尽管这是非常规的，但如果我们能够加载它，这将是可行的。

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

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

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

Answer 1

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

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

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

如果没有额外的配置，则无法重命名该目录。

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

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

请注意，static头值中的路径被排除在外，静态文件夹名称本身不会在服务器根目录中公开，因此您需要将其保留。

现在，bundle.js 文件按预期加载。从这里开始，我正在研究如何以更干净、更少手动移动到位的方式添加此文件，但这将让我暂时前进。

感谢您的帮助@Ifaruki！