如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
最近開發(fā)過程中遇到個小需求，需要根據(jù)需求動態(tài)配置一些靜態(tài)數(shù)據(jù)，但我不想直接把這個靜態(tài)文件引入進(jìn)來，build時就會把數(shù)據(jù)打包到j(luò)s文件中，造成js文件很大；呃呃。。。。（ps:就想給自己找點(diǎn)別扭）
回頭看一下項目，果斷的在根目錄下創(chuàng)建一個static/test.json文件,在目標(biāo)頁面下fetch獲取這個json文件里的數(shù)據(jù)：
fetch("../static/test.json")
.then(res => res.json())
.then(res => {
//獲取到了數(shù)據(jù)
})
.catch(err=>{
//解析錯誤或者獲取數(shù)據(jù)失敗
})
ok，就這么簡單，完活了運(yùn)行起來看看效果（灰常自信）；
結(jié)果現(xiàn)實給了我一記記大嘴巴子；
他居然走了catch error，打開瀏覽器查看一下
結(jié)果狀態(tài)是200，fetch請求沒有什么問題，那就可能是json文件路徑有問題，它不想讓我找到，居然和我躲貓貓；我這小脾氣怎么能忍，結(jié)果又一個 2000 years later。。。。
我發(fā)現(xiàn)在我build完后，打包好的項目中沒有test.json文件，因為我用的是vue-cli 3.x 構(gòu)建的項目，在不引用的情況下，不會把這個靜態(tài)文件打包帶走的，所以 真想只有一個，不是人家在躲貓貓，是我根本就沒帶人家玩。
so 正文終于來了（對不起，前戲有點(diǎn)多）：
我想把static下所有的靜態(tài)文件原封不動打包帶走，我想到了
安裝完成后在vue.config.js 文件配置一下吧
//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns:[{
from: "./static",
to: 'static'
}]
})
]
}
}
ok，就這么簡單，完活了運(yùn)行起來看看效果（還是灰常自信）：
以上就是遇到這個問題整個解決的思路啦；
到此這篇關(guān)于如何配置vue.config.js 處理static文件夾下的靜態(tài)文件的文章就介紹到這了,更多相關(guān)vue.config.js處理靜態(tài)文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
使用vuex較為優(yōu)雅的實現(xiàn)一個購物車功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實現(xiàn)一個購物車功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案，需要的朋友可以參考下2022-11-11
Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
今天小編就為大家分享一篇Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3父組件異步props傳值子組件接收不到值問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3父組件異步props傳值子組件接收不到值問題的解決辦法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vite項目如何從0開始配置eslint問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法【加track-by=''索引''】
這篇文章主要介紹了vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法,結(jié)合實例形式分析了vue.js通過在v-for循環(huán)中添加track-by='索引'解決重復(fù)數(shù)據(jù)無法添加問題相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
深入探討如何在Vue中使用EventBus實現(xiàn)組件間的高效通信
在現(xiàn)代前端開發(fā)中,Vue.js?作為一種流行的漸進(jìn)式框架,廣泛應(yīng)用于各類?Web?項目的構(gòu)建中,本文將深入探討如何在?Vue?中使用?EventBus,實現(xiàn)組件間的高效通信,需要的可以了解下2024-11-11
這篇文章主要為大家介紹了專業(yè)級的Vue?多級菜單設(shè)計實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07