logo标签列表

在nuxt.js页面中引入外部JavaScript文件

javascriptvue.jsvuejs2nuxt.js
14

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

我正在尝试在 Nuxt.js 中实现 这个代码片段中的小部件。

以下是我的代码，如果我使用原始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 项目中的一个页面中包含这个 dev widget 时，它没有起作用。

这是我的代码：

<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 >

我在这里做错了什么，有任何想法吗？

5个回答
30

添加为全局

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

您还可以将async、cross-origin属性添加到脚本标记中，如下所示。

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'
          }
        ],
      }
    }
  }
11

@kiyuku1 的答案可行，但以下是完整解决方案，如果我们想要在一个Nuxt.js页面中包含一个js（或mjs）文件而不是全局使用：

@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>
这种方法肯定可行，但如果外部脚本加载了你想在Nuxt中使用的内容，那么你就会遇到问题。此时，你的Nuxt（Vue）代码在浏览器获取和处理外部文件之前运行，存在竞争条件。 - beporter
@beporter，您能详细说明一下吗？我有一个脚本，如果我从/开始并浏览到使用该脚本的页面，则可以正确加载。如果我直接加载页面，则脚本不会被加载。 - Simone
7
您需要在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: {}
}

1

在nuxt 3.0.0-rc.6中，它是这样的：

meta: { 
  script: [
    { src: "https://path.to/your.js" }
  ]
},
0
我该如何包含外部脚本文件呢？ - kp123
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接