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