Question

我正在尝试将purchased Bootstrap theme（因为我面临设计挑战）用于Nuxt网站。我已经设法包括了所有的scss / css文件，但是在寻找一种方法来添加自定义.js文件时遇到了问题。主题本身使用jQuery，并且这两个文件都是jQuery函数。我已经从npm添加了bootstrap-vue和jQuery，并且尝试在script资产的head部分的nuxt.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文件。

Answer 1

也许您只缺少/？假设您具有此文件夹结构：

/static/js/modernizr-custom.js

您可以包括它：

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

这可以解决您的问题吗？

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

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

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 }

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

1 个答案: