将 bootstrap 主题与 nuxt.js 项目集成

Question

我刚开始一个新项目，正在使用一个 bootstrap 主题，我想将其与我的 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

我不确定 assets 文件夹是否是脚本的最佳位置，因为 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.

，您无需 Jquery 即可将 Bootstrap 集成到 NUXT 中

祝你好运！

将 bootstrap 主题与 nuxt.js 项目集成

Integrate bootstrap theme with nuxt.js project

config

nuxt.js