vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
查看網(wǎng)上許多教程，都是一樣的，可能他們安裝的時(shí)候沒有碰到問題，我在按照網(wǎng)上教程操作完后，還是不行，
本人英語(yǔ)還可以，于是我就嘗試看了看報(bào)的錯(cuò)，提示有幾個(gè)格式需要找loader處理一下，如果你也遇到和我一樣的問題就看下面吧？
首先安裝jquery
npm install jquery@1.11.3 --save-dev
安裝Bootstrao庫(kù)
這里是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í)，頁(yè)面正常
解決方法
還是在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)文章
這篇文章主要介紹了vue?this.$toast?失效問題匯總,本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2024-03-03
文章介紹了如何在Vue中通過Click方法獲取原事件的參數(shù),包括默認(rèn)參數(shù)、自定義參數(shù)以及如何同時(shí)獲取原生事件和自定義參數(shù)的方法2024-12-12
vue 組件 全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)
下面小編就為大家分享一篇vue 組件 全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線上后,刷新頁(yè)面會(huì)提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組的操作方法
這篇文章主要介紹了在Vue項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組的操作方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
Vue3整合WangEditor富文本編輯器的實(shí)踐指南
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?項(xiàng)目中集成?WangEditor?富文本編輯器,實(shí)現(xiàn)圖文混排、自定義擴(kuò)展等高階功能,感興趣的小伙伴可以了解下2025-03-03
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10
vue3使用vue3-print-nb main.ts報(bào)錯(cuò)聲明文件找不到的解決
在Vue3中使用vue3-print-nb時(shí),因第三方包類型文件缺失導(dǎo)致全局引入報(bào)錯(cuò),手動(dòng)聲明可解決,打印預(yù)覽需清除標(biāo)題、地址等樣式以優(yōu)化輸出,理解原理靈活應(yīng)對(duì)問題2025-07-07
這篇文章主要介紹了vite+vue3中如何使用router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06