nuxtjs 中的外部 Javascript 文件

Question

我的网站基于 old tutorial，它使用 3 个外部 js files。我无法使用 nuxtjs 重新创建它。

首先，我尝试在标签之前包含js文件。

nuxt.config.js

head: {
    script: [
      { src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
    ]
  },

这适用于初始页面加载。但是，一旦我更改页面，js文件就会被忽略。

---

经过一番研究，我尝试将这些文件作为插件包含在内，以避免 ssr。

nuxt.config.js

plugins: [
    { src: "plugins/imagesloaded.pkgd.min.js", mode: 'client' },
    { src: "plugins/TweenMax.min.js", mode: 'client' },
    { src: "plugins/demo.js", mode: 'client' }
  ],

这给了我多条错误消息（其中包括：'Cannot read property addEventListener of null）。

这是一个非常小的项目，时间压力很大，因此非常感谢任何形式的帮助！

---

更新：

Original GitHub repository.

Answer 1

解决方案 - 遵循的步骤：

---

将base.css添加到static > css文件夹，并将所有js文件添加到static > js文件夹，然后引用nuxt.config.js中的所有内容：

    link: [
      { rel: 'stylesheet', type: 'text/css', href: 'css/base.css' }
    ],
    script: [
      { src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
   ]

将所有图像添加到 static > img 文件夹并编辑 base.css 以引用 base.css 中的图像 - 写入（无论引用图像的位置（2 个位置））：url('../img/1.jpg')

在 Vue 模板中，按原样复制粘贴 HTML。

在 Vue 模板中引用图像时，您只需这样做：

<div class="background" style="background-image: url(img/1.jpg)"></div>

就是这样。它应该可以正常工作。

---

我创建了一个GitHub repository，所以你可以看看我是怎么做到的。

---

您也可以在CodeSandbox 上实时观看。