nuxtjs 中的外部 Javascript 文件

Question

我在旧教程的基础上建立了一个网站，该教程使用 3 个外部 js 文件。我无法使用 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。

这是一个非常小的项目，时间压力很大，所以任何形式的帮助将不胜感激！

---

更新：

原始 GitHub 存储库。

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 存储库，所以你可以看看我是如何做到的。

您还可以在CodeSandbox上实时查看。