nuxt.js 페이지에 외부 javascript 파일 포함
비교적 간단한 질문이 있습니다.
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>
그러나 이 dev 위젯을 내 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'
}
],
}
}
}
@kiyuku1의 답변은 유효합니다만, 여기에서는 js(또는 mjs) 파일을 글로벌하게가 아닌 ONE nuxt.js 페이지에만 포함시키고 싶은 경우의 완전한 솔루션을 소개합니다.
<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. 이게 어떻게 보여야 합니다.
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: {}
}다음은 답변의 힌트입니다. "Unknown custom element: < dev-widget >"
dev-widget 컴포넌트를 등록합니다.
상세한 것에 대하여는, https://github.com/nuxt/nuxt.js/issues/2877 를 참조해 주세요.
언급URL : https://stackoverflow.com/questions/59015259/include-external-javascript-file-in-a-nuxt-js-page
'programing' 카테고리의 다른 글
| Maven 스냅샷이란 정확히 무엇이며 왜 필요한가? (0) | 2022.07.08 |
|---|---|
| Vue - API 콜이 Vuex에 속합니까? (0) | 2022.07.08 |
| Vuex 상태에서 개체의 속성을 지우는 가장 좋은 방법은 무엇입니까? (0) | 2022.07.07 |
| Vue js vuelidate 사용자 지정 검증 (0) | 2022.07.07 |
| 단순하게 1이 아닌 C 부울 매크로에서 #sublic TRUE(1==1)를 사용하는 이유는 무엇입니까? (0) | 2022.07.07 |