六一888
2019-08-03 01:48
老师,我正在做一个 nuxt.js 项目,为了面试做准备的,目前遇到的问题搜索不到解决办法,我使用了 boostrap 的响应式导航栏,我通过引入外部资源来使用 boostrap,但是无法正确显示导航栏,我在正常的html文件中就可以正常显示,但在nuxt.js项目中就显示不了,之后我使用了 npm install 来使用boostrap,也无法正常显示,控制台没有报错:
使用 html 文件正确显示的效果图(代码是一样的):
使用 nuxt.js 错误显示的效果图:
引入外部文件:
但是网页请求 boostrap.js 和 jquery.js 都成功了
我又使用 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) { } }
jiayou
玩转Bootstrap(基础)
314546 学习 · 2275 问题
相似问题