将引导主题与 nuxt.js 项目集成

Question

我刚刚开始了一个新项目，并且正在使用我希望与我的 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>

我尝试使用~/、/ 和./ 开始路径

问题是在声明的路径中找不到这些源文件。

非常感谢任何想法或帮助！

Answer 1

我不确定资产文件夹是否是脚本的最佳位置，因为 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' }
        ],

      }
    }

还请记住，感谢BootstrapVue，您可以在 NUXT 中集成 Bootstrap 而无需 Jquery。

祝你好运！