kp1*_*123 6 javascript vue.js vuejs2 nuxt.js
我有一个比较简单的问题。
我正在尝试在 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 >
知道我在这里做错了什么吗？
@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.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'
}
],
}
}
}
您需要将脚本添加到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: {}
}| 归档时间： |
|
| 查看次数： |
10072 次 |
| 最近记录： |