vue.js - 是否可以仅在需要的地方而不是在 nuxtjs 中的 nuxt.config.js 中实现包含脚本

标签 vue.js nuxt.js razorpay

我正在使用 Razorpay 进行付款服务。除了结帐页面之外,没有页面使用它。我已将其包含在 nuxt.config.js 文件中。 nuxtjs 中是否可以仅在您可能需要的地方使用脚本?并非在所有页面中。 (我的灯塔分数因此下降)

最佳答案

是的,这是可能的。您可以使用 Local Settings将您的资源包含在 pages/ 目录内的 .vue 文件中(此处位于 head 函数中):

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
export default {
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
      ]
    }
  }
}
</script>

<style scoped>
h1 {
  font-family: Roboto, sans-serif;
}
</style>

这里,这个 jQuery js 文件和 Roboto font css 只会包含在这个页面中,而不是所有页面中。

关于vue.js - 是否可以仅在需要的地方而不是在 nuxtjs 中的 nuxt.config.js 中实现包含脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62168571/

相关文章:

javascript - 如何在运行时配置中使用 nuxt.config.js 中的 .env 值

flutter - 如何在 Flutter 中使用 Razorpay Orders API?

vue.js - Nuxt 无法加载 payload _payload.js TypeError : Failed to resolve module specifier '_payload.js'

nuxt.js - 验证 : editing no-data-text prop or no-data slot for v-select doesn't seem to have any effect

javascript - 数组的最佳浅拷贝?

javascript - 在Vue Mounted函数中访问DOM

ios - 在flutter中添加Razorpay_flutter 1.1.2时运行Pod安装时出错

android - Razorpay 结帐表格卡在 webview 中加载

typescript - typescript 中可选的必需参数

javascript - vue实例访问外部js文件