在 nuxt.js 页面中包含外部 javascript 文件答案

【问题标题】：Include external javascript file in a nuxt.js page在 nuxt.js 页面中包含外部 javascript 文件
【发布时间】：2020-03-19 18:23:49
【问题描述】：

我有一个比较简单的问题。

我正在尝试在 Nuxt.js 中实现 the widget from this codepen。

这是我的代码，如果我使用 RAW HTML，它可以正常工作：

<!DOCTYPE html>
<html>
<head></head>
<body>
  <dev-widget data-username="saurabhdaware"></dev-widget>
  <script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>
</body>

</html>

但是当我尝试在我的 nuxt.js 项目中包含这个开发小部件时，在我的一个页面中，它不起作用。

这是我的代码：

<template>
  <div class="container">

    <div>
        <dev-widget data-username="saurabhdaware"></dev-widget>
    </div>

  </div>
</template>

<script>

export default {
  layout: "default",
};
</script>

<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>

我不断收到错误：

Unknown custom element: < dev-widget >

知道我在这里做错了什么吗？

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

全局添加

导航到 nuxt.config.js 文件。它将脚本标签添加到 Nuxt 应用中的所有页面。

export default {
  head: {
    script: [
      {
        src: "https://code.jquery.com/jquery-3.5.1.min.js",
      },
    ],
  }
  // other config goes here
}

如果你想在关闭</body>而不是<head>标签之前添加一个脚本标签，你可以通过添加一个body: true来实现。

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    body: true,
  },

您还可以像这样向脚本标签添加异步、跨域属性。

script: [
  {
    src: "https://code.jquery.com/jquery-3.5.1.min.js",
    async: true,
    crossorigin: "anonymous"
  },
],

输出

<script data-n-head="ssr" src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous" async=""></script>

添加到特定页面

<script>
  export default {
    head() {
      return {
        script: [
          {
            src: 'https://code.jquery.com/jquery-3.5.1.min.js'
          }
        ],
      }
    }
  }
</script>

注意： 如果要添加本地js文件，请将其放在根static文件夹中，并添加如下。

  export default {
    head() {
      return {
        script: [
          {
             src: '/js/jquery.min.js'
          }
        ],
      }
    }
  }

【讨论】：

【解决方案2】：

@kiyuku1 的答案会起作用，但如果我们只想在一个 nuxt.js 页面中包含一个 js（或 mjs）文件，而不是在全局范围内包含一个 js（或 mjs）文件，那么这里有一个完整的解决方案：

<template>
  <div class="container">

    <div>
        <dev-widget data-username="saurabhdaware"></dev-widget>
    </div>

  </div>
</template>

<script>

export default {
  layout: "default",

  head: {
    script: [
      {
        type: 'module',
        src: 'https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs'
      }
    ]
  },

};
</script>

【讨论】：

这种方法肯定行得通，但是如果外部脚本加载了您想在 Nuxt 中使用的内容，您会遇到问题。然后在浏览器获取和处理外部文件之前运行的 Nuxt (Vue) 代码之间存在竞争条件。

【解决方案3】：

您需要在nuxt.config.js 中添加您的脚本。这是它的样子

export default {
    mode: 'universal',
    /*
     ** Headers of the page
     */
    head: {
        title: 'Your title',
        meta: [{
                charset: 'utf-8'
            },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            }
        ],

        link: [
            {
                rel: 'stylesheet',
                href: 'css/mystyles.css'
            }
        ],

        script: [
            {
                type: 'module',
                src: 'https://unpkg.com/dev-widget@1.0.3/dist/card.component.js'
            }
        ]
    },
    /*
     ** Customize the progress-bar color
     */
    loading: {
        color: '#fff'
    },
    /*
     ** Global CSS
     */
    css: [],
    /*
     ** Plugins to load before mounting the App
     */
    plugins: [],
    /*
     ** Nuxt.js dev-modules
     */
    buildModules: [],
    /*
     ** Nuxt.js modules
     */
    modules: [],
    /*
     ** Build configuration
     */
    build: {}
}

【讨论】：

【解决方案4】：

这是您回答中的线索：“未知的自定义元素：”。

【讨论】：

我如何包含外部脚本文件？