时间戳

首页 > 解决方案 > 如何将自定义主题 js 文件合并到 Nuxt

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

问题描述

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

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 文件。

标签： javascriptjqueryvuejs2nuxt.js

解决方案

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

/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 并将其放入您的静态目录。或者，您可以使用 CND 从加载 jquery。（这是有道理的，因为其他页面可能已经从同一个 cdn 加载了 jquery，并且您已经缓存了它）。

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

推荐阅读