如何将自定义主题 js 文件合并到 Nuxt

Question

我正在尝试将购买的 Bootstrap 主题（因为我面临设计挑战）用于 Nuxt 网站。 我已经设法获得了所有的 scss/css 文件，但是我在寻找一种方法来添加 custom.js 文件时遇到了问题。 主题本身使用jQuery，两个文件都是jQuery函数。 我已经从 npm 添加了bootstrap-vue和jQuery ，并且我尝试nuxt.config.js like so using the的head部分的script项中添加文件；

head{
    script: [
      { src: '~assets/js/min/plugins.min.js' },
      { src: '~assets/js/min/custom.min.js' },
      { src: '~assets/js/min/modernizr.min.js' },
    ],
}

像这样使用static目录

head{
    script: [
      { src: 'js/min/plugins.min.js' },
      { src: 'js/min/custom.min.js' },
      { src: 'js/min/modernizr.min.js' },
    ],
}

但无论哪种方式，我都会收到jQuery is not defined error 。

是否有其他方法可以加载这些文件，以便它们可以访问 jQuery？ 搜索结果似乎表明也许我应该使用插件，但我不确定如何仅添加本地 js 文件。

Answer 1

也许你只有一个/失踪？ 假设你有这个文件夹结构：

/static/js/modernizr-custom.js

你可以包括它：

head: {
  ...
  script: [
    { src: '/js/modernizr-custom.js' }
  ]
}

这能解决你的问题吗？

当然，如果您的 plugin.js 使用jQuery ，那么您必须实际加载 jQuery。

为此，只需将 jQuery 以相同的方式包含在nuxt.config.js中的脚本中：

head: {
  ...
  script: [
    { src: '/js/jquery.min.js' },
    { src: '/js/plugin.js' }
  ]
}

这意味着您必须下载 jquery 并将其放入您的 static 目录中。 或者，您可以使用 CND 从加载 jquery。 （这是有道理的，因为其他页面可能已经从同一个 cdn 加载了 jquery 并且您已经缓存了它）。

{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js }