Question

我正在使Web模板适应nuxt应用程序。
Bassicaly用html代码制作页面和组件。 Sass代码来自本地，所以还可以。

但是有一个问题。该模板需要一些js库才能工作，即：jquery，nice-select，jquery-ui，slicknav，mixitup，owl-carousel及其主要js文件。当然，其中一些彼此依赖。我遇到的问题是脚本在第一次加载时就可以工作，但是一旦我导航到其他页面，它们就会停止工作。

第一种方法是从页脚调用静态文件（放置在静态文件夹中），如下所示：

<script src="/js/jquery-3.3.1.min.js" data-not-lazy></script>
<script src="/js/bootstrap.min.js" data-not-lazy></script>
<script src="/js/jquery.nice-select.min.js" data-not-lazy></script>
<script src="/js/jquery-ui.min.js" data-not-lazy></script>
<script src="/js/jquery.slicknav.js" data-not-lazy></script>
<script src="/js/mixitup.min.js" data-not-lazy></script>
<script src="/js/owl.carousel.min.js" data-not-lazy></script>
<script src="/js/main.js" data-not-lazy></script>

data-not-lazy属性是因为我正在使用nuxt-lazy进行图像延迟加载，但这显然与它无关，因为如果我从应用程序中完全删除软件包，这种情况会一直发生。

第二种方法是从nuxt-config.js调用它们：

{
  head: {
    script: [
      { src: "/js/jquery-3.3.1.min.js", body: true, type: "text/javascript" },
      { src: "/js/bootstrap.min.js", body: true, type: "text/javascript" },
      { src: "/js/jquery.nice-select.min.js", body: true, type: "text/javascript" },
      { src: "/js/jquery-ui.min.js", body: true, type: "text/javascript" },
      { src: "/js/jquery.slicknav.js", body: true, type: "text/javascript" },
      { src: "/js/mixitup.min.js", body: true, type: "text/javascript" },
      { src: "/js/owl.carousel.min.js", body: true, type: "text/javascript" },
      { src: "/js/main.js", body: true, type: "text/javascript" }
    ]
  }
}

但是这些选项都不起作用

Nuxt-加载静态js问题

0 个答案: