javascript - 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 上实时查看。 .