问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

我正在尝试在 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 >

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

原文由 kp123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.jsvuejs2nuxt.js
阅读 781
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您需要在 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: {}
}

原文由 muya.dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
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="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'
          }
        ],
      }
    }
  }

原文由 zarpio 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题