vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
更新時(shí)間：2023年10月26日 10:21:19 作者：Homyee King
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
查看網(wǎng)上許多教程，都是一樣的，可能他們安裝的時(shí)候沒有碰到問題，我在按照網(wǎng)上教程操作完后，還是不行，
本人英語還可以，于是我就嘗試看了看報(bào)的錯(cuò)，提示有幾個(gè)格式需要找loader處理一下，如果你也遇到和我一樣的問題就看下面吧？
首先安裝jquery
npm install jquery@1.11.3 --save-dev
安裝Bootstrao庫
這里是3.3.0
npm install bootstrap@3.3.0 --save-dev
配置jquery
在對(duì)應(yīng)項(xiàng)目文件夾下找到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';
網(wǎng)上教程基本就到這一步了，如果你的還不行就看看下面的東西你有沒有配置
報(bào)錯(cuò)會(huì)提示無法解決xxxxxxxxx.ttf之類的文件
于是我就一個(gè)一個(gè)的解決，還好就三種格式，直到報(bào)錯(cuò)小時(shí)，頁面正常
解決方法
還是在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!!!
粘貼過去一定要檢查一下引號(hào)是否是英文狀態(tài)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在使用Vue3時(shí),有時(shí)頁面修改后會(huì)出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁面空白問題解決辦法,文中介紹的步驟可以有效解決頁面空白問題,需要的朋友可以參考下2024-09-09
在Vue開發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue項(xiàng)目中配置pug解析支持的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡
放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue 中v-model的完整用法及v-model的實(shí)現(xiàn)原理解析
這篇文章詳細(xì)介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結(jié)合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧2025-02-02
vue實(shí)現(xiàn)實(shí)時(shí)搜索顯示功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)搜索顯示功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)
本文主要介紹了Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07