Простое добавление тегов скрипта в nuxtjs

#vue.js #vuejs2 #nuxt.js

Вопрос:

В принципе, мне нужно добавить скрипт в начало моего index.html,

 <script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXXX" data-user="XXXXX" async></script>

итак, что я попробовал, это…

в моем nuxt.config.js

 head: {
    script: [
        {  
           type: 'text/javascript', 
           src: 'https://a.optmnstr.com/app/js/api.min.js',
           data-account: 'XXXXX',
           data-user: 'XXXXX',
           async: true
        }
    ]
}

теперь, очевидно, это не работает, поскольку data-account и data-user недопустимо, так как я могу заставить это работать??

Будем признательны за любую помощь!

Спасибо

Ответ №1:

На это указал @Andrew1325

В nuxt.js вы можете создать app.html файл и добавлять в него скрипты, поэтому в моем случае app.html файл выглядит следующим образом

 <!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
  <script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXX" data-user="XXXX" async></script>
</html>

IMO это очень простой способ включить сложные скрипты в ваш проект

ПРИМЕЧАНИЕ

Вам нужно будет перезапустить свой проект, чтобы увидеть app.html изменения

Для получения дополнительной информации вы можете перейти к nuxtjs — app template

1. Как вы добавляете js, который находится в папке assets, а не извне

2. Это решение было подтверждено @atinux здесь: github.com/nuxt/nuxt.js/issues/1580#issuecomment-327114193

3. Это решение работает. Один вопрос, как добавить пользовательский скрипт HEAD только для производства (target: 'static') ? И избегать его загрузки во время работы над development ?

Ответ №2:

Вы также можете просто заключить атрибуты данных в одинарные кавычки вот так:

 head: {
    script: [
        {  
            type: 'text/javascript', 
            src: 'https://a.optmnstr.com/app/js/api.min.js',
            'data-account': 'XXXXX',
            'data-user': 'XXXXX',
            async: true
        }
    ]
}

Ответ №3:

Это может помочь вам

 export default {
  data () {
    return {
      message: '',
      head: {
        type: Object,
        default: function () {
          return {
            title: ' Default Home page  ',
            meta: [
              {
                'hid': 'description',
                'name': ' description',
                'content': ' Home page  content '
              }
            ],
            script: [
              {
                innerHTML: {
                  'url': 'https://www.example.com',
                  'logo': 'https://www.example.com/icon/logo.png',
                  'parentOrganization': {
                    'name': 'The X Company Inc',
                    'url': 'https://example.io',
                    'logo': 'https://example.io/logo-est.png',
                    '@type': 'Organization'
                  },
                  'foundingLocation': {
                    'address': {
                      'addressLocality': 'Dakar',
                      'addressRegion': 'Selegal',
                      '@type': 'PostalAddress'
                    },
                    '@type': 'Place'
                  },
                  'sameAs': ['https://www.facebook.com/example', 'https://www.twitter.com/example'],
                  '@context': 'http://schema.org',
                  '@type': 'Organization'
                },
                type: 'application/ld json'
              }
            ]
          }
        }
      }
    }
  }
}
</script>