时间戳

首页 > 解决方案 > nuxtjs 中的外部 Javascript 文件

javascript - nuxtjs 中的外部 Javascript 文件

问题描述

我的网站基于一个旧教程，它使用 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 存储库。

标签： javascriptvue.jsnuxt.js

解决方案

解决方案 - 要遵循的步骤：

添加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上实时查看。

推荐阅读