我有一个相对简单的问题。
我正在尝试实现 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/