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

Question

我有一个相对简单的问题。

我正在尝试在 Nuxt.js 中实现这个 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 >

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

Answer 1

@kiyuku1 的答案会起作用，但如果我们只想在一个 nuxt.js 页面中包含一个 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>

Answer 2

添加为全局

导航到 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'
          }
        ],
      }
    }
  }

Answer 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: {} }

Answer 4

使用 nuxt 3.0.0-rc.6 它是：

meta: { 
  script: [
    { src: "https://path.to/your.js" }
  ]
},

Answer 5

这是您答案中的线索：“未知的自定义元素：< dev-widget >”。

注册 dev-widget 组件。

更多详情： https : //github.com/nuxt/nuxt.js/issues/2877

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

问题描述

5 个解决方案

解决方案1
9 2019-11-24 07:53:33

解决方案2
9 2021-02-17 10:03:26

解决方案3
2 已采纳 2019-11-24 07:39:09

解决方案4
0 2022-08-12 08:49:25

解决方案5
-1 2019-11-24 06:42:30

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

问题描述

5 个解决方案

解决方案1 9 2019-11-24 07:53:33

解决方案2 9 2021-02-17 10:03:26

解决方案3 2 已采纳 2019-11-24 07:39:09

解决方案4 0 2022-08-12 08:49:25

解决方案5 -1 2019-11-24 06:42:30

解决方案1
9 2019-11-24 07:53:33

解决方案2
9 2021-02-17 10:03:26

解决方案3
2 已采纳 2019-11-24 07:39:09

解决方案4
0 2022-08-12 08:49:25

解决方案5
-1 2019-11-24 06:42:30