在 nuxt.js 页面中包含外部 javascript 文件
Posted
技术标签:
【中文标题】在 nuxt.js 页面中包含外部 javascript 文件【英文标题】：Include external javascript file in a nuxt.js page 【发布时间】：2020-03-19 18:23:49 【问题描述】：我有一个比较简单的问题。
我正在尝试在 Nuxt.js 中实现 the widget from this 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 >
知道我在这里做错了什么吗？
【问题讨论】：
【参考方案1】：全局添加
导航到 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="s-s-r" 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'
],
【讨论】：
【参考方案2】：@kiyuku1 的答案会起作用，但如果我们只想在一个 nuxt.js 页面中包含一个 js（或 mjs）文件，而不是在全局范围内包含一个 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) 代码之间存在竞争条件。【参考方案3】：您需要在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:
【讨论】：
【参考方案4】：这是您回答中的线索：“未知的自定义元素：”。
注册 dev-widget 组件。
更多详情： https://github.com/nuxt/nuxt.js/issues/2877
【讨论】：
我如何包含外部脚本文件？以上是关于在 nuxt.js 页面中包含外部 javascript 文件的主要内容，如果未能解决你的问题，请参考以下文章