vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)
更新时间：2023年10月26日 10:21:19 作者：Homyee King
这篇文章主要介绍了vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
查看网上许多教程，都是一样的，可能他们安装的时候没有碰到问题，我在按照网上教程操作完后，还是不行，
本人英语还可以，于是我就尝试看了看报的错，提示有几个格式需要找loader处理一下，如果你也遇到和我一样的问题就看下面吧？
首先安装jquery
npm install jquery@1.11.3 --save-dev
安装Bootstrao库
这里是3.3.0
npm install bootstrap@3.3.0 --save-dev
配置jquery
在对应项目文件夹下找到webpack.config.js，配置一下插件
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
“windows.jQuery”: “jquery”
})
]mian.js里添加
import $ from ‘jquery'; import ‘bootstrap/dist/css/bootstrap.min.css'; import ‘bootstrap/dist/js/bootstrap.min';
网上教程基本就到这一步了，如果你的还不行就看看下面的东西你有没有配置
报错会提示无法解决xxxxxxxxx.ttf之类的文件
于是我就一个一个的解决，还好就三种格式，直到报错小时，页面正常
解决方法
还是在webpack.config.js下配置loader
这里我们需要的是url-loader
安装
npm install --save-dev url-loader
具体使用教程看文档
https://www.webpackjs.com/loaders/url-loader/
然后配置
{
test: /.(ttf|eot|woff)$/,
use: [
{
loader: ‘url-loader',
options: {
limit: 8192
}
}
]
}大功告成！
PS!!!
粘贴过去一定要检查一下引号是否是英文状态
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下2024-09-09
在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue项目中配置pug解析支持的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于vuejs路由的传参及路由props配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
放大镜在很多地方都可以使用的到，本文主要介绍了vue结合leaflet实现地图放大镜，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
Vue 中v-model的完整用法及v-model的实现原理解析
这篇文章详细介绍了Vue.js中的v-model指令的使用,包括基本用法、原理、结合不同类型的表单元素（如radio、checkbox、select）以及使用修饰符（如lazy、number、trim）等,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要为大家详细介绍了vue实现实时搜索显示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了解决vue内存溢出报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了Vue3管理后台项目使用高德地图选点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
最新评论