Интеграция темы начальной загрузки с проектом nuxt.js - PullRequest
Новая
       42

Интеграция темы начальной загрузки с проектом nuxt.js

0 голосов
/ 30 сентября 2019

Я только что начал новый проект и работаю с темой начальной загрузки, которую я хотел бы интегрировать с моим проектом Nuxt.js.

Я считаю, что я правильно загрузил все файлы ресурсов css, хотя япытаясь понять, как правильно добавить файлы JS.

Я попытался загрузить исходные файлы сценария в nuxt.config.js следующим образом: 

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      { src: './assets/js/jquery-1.11.0.min.js'},
      { src: './assets/bootstrap/js/bootstrap.min.js'},
      { src: './assets/js/jquery.backstretch.min.js'},
      { src: './assets/js/owl.carousel.min.js'},
      { src: './assets/js/jquery.knob.min.js'},
      { src: './assets/js/jquery.magnific-popup.min.js'},
      { src: './assets/js/jquery.simple-text-rotator.min.js'},
      { src: './assets/js/jquery.waypoints.js'},
      { src: './assets/js/wow.min.js'},
      { src: './assets/js/smoothscroll.js'},
      { src: './assets/js/jquery.fitvids.js'},
      { src: './assets/js/gmaps.js'},
      { src: './assets/js/custom.js'},
      { src: 'http://maps.google.com/maps/api/js?sensor=true'}
    ]
  },
...

, и я также попытался добавить тему непосредственно в мой файл index.vue, например: 

<script>
// import Logo from '~/components/Logo.vue'

export default {
  components: {
    // Logo
  },
  head () {
    return {
      script: [
        { src: '/assets/js/jquery-1.11.0.min.js'},
        { src: '/assets/bootstrap/js/bootstrap.min.js'},
        { src: '/assets/js/jquery.backstretch.min.js'},
        { src: '/assets/js/owl.carousel.min.js'},
        { src: '/assets/js/jquery.knob.min.js'},
        { src: '/assets/js/jquery.magnific-popup.min.js'},
        { src: '/assets/js/jquery.simple-text-rotator.min.js'},
        { src: '/assets/js/jquery.waypoints.js'},
        { src: '/assets/js/wow.min.js'},
        { src: '/assets/js/smoothscroll.js'},
        { src: '/assets/js/jquery.fitvids.js'},
        { src: '/assets/js/gmaps.js'},
        { src: '/assets/js/custom.js'},
        { src: 'http://maps.google.com/maps/api/js?sensor=true'}
      ]
    }
  }
}
</script>

Я пытался начать пути с ~/, /, а также ./

Проблема в том, что эти исходные файлы не найдены с объявленным путем.

bootstrap theme integration with nuxt console err

Любые идеи или помощь с благодарностью!

1 Ответ

1 голос
/ 02 октября 2019

Я не уверен, что папка активов - лучшее место для сценариев, потому что webpack собирается обработать эту папку. Для своих сценариев я использую папку static , вам нужен только / для маршрута, например: 

script: [{ src: "/highlight.pack.js" }, { src: "/animate.js" }]

Или вы можете использовать адреса CDN для наиболее распространенныхбиблиотеки. Вам понадобится только URL. Пример: 

 export default {
      head: {
        script: [
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
        ],

      }
    }

Помните также, что вы можете интегрировать Bootstrap в NUXT без необходимости Jquery благодаря BootstrapVue .

Удачи!

...