脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli之引入Bootstrap

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!!!

粘贴过去一定要检查一下引号是否是英文状态

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论