gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 00:24:56 27 4
gpt4 key购买 nike

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

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

这是我的代码,如果我使用 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 >

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

最佳答案

全局添加
导航到 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'
}
],
}
}
}

关于javascript - 在 nuxt.js 页面中包含外部 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59015259/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com