boostrap + nuxt.js 遇到问题

来源:6-7 响应式导航条

六一888

2019-08-03 01:48

老师,我正在做一个 nuxt.js 项目,为了面试做准备的,目前遇到的问题搜索不到解决办法,我使用了 boostrap 的响应式导航栏,我通过引入外部资源来使用 boostrap,但是无法正确显示导航栏,我在正常的html文件中就可以正常显示,但在nuxt.js项目中就显示不了,之后我使用了 npm install 来使用boostrap,也无法正常显示,控制台没有报错:

使用 html 文件正确显示的效果图(代码是一样的):

https://img3.mukewang.com/5d44771b0001b81b28620228.jpg

使用 nuxt.js 错误显示的效果图:

https://img3.mukewang.com/5d44771b000110e028600634.jpg

引入外部文件:

https://img2.mukewang.com/5d44771d0001001718660770.jpg

但是网页请求 boostrap.js 和 jquery.js 都成功了

https://img.mukewang.com/5d44771e0001ec2b25120792.jpg

我又使用 npm install 来使用 bootstrap,但是一样不能正常工作:

css: [    'bootstrap/dist/css/bootstrap.css',    '@/assets/styles/common.css',    '@/assets/styles/iconfont.css'  ],  /*  ** Plugins to load before mounting the App  */  plugins: [    '~plugins/bootstrap.js'  ],  /*  ** Nuxt.js modules  */  modules: [    // Doc: https://bootstrap-vue.js.org/docs/    'bootstrap-vue/nuxt',  ],  /*  ** Build configuration  */  build: {    /*    ** You can extend webpack config here    */    vendor: ['jquery', 'bootstrap'],    plugins: [      // set shortcuts as global for bootstrap      new webpack.ProvidePlugin({        $: 'jquery',        jQuery: 'jquery',        'window.jQuery': 'jquery'      })    ],    extend(config, ctx) {    }  }


写回答 关注

1回答

  • 慕虎8125020
    2020-02-13 20:14:42

    jiayou

玩转Bootstrap(基础)

告诉你使用Bootstrap,并且能够独立定制出适合自己的Bootstrap

314546 学习 · 2275 问题

查看课程

相似问题