如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
最近開發(fā)過程中遇到個小需求,需要根據(jù)需求動態(tài)配置一些靜態(tài)數(shù)據(jù),但我不想直接把這個靜態(tài)文件引入進來,build時就會把數(shù)據(jù)打包到j(luò)s文件中,造成js文件很大;呃呃。。。。(ps:就想給自己找點別扭)
回頭看一下項目,果斷的在根目錄下創(chuàng)建一個static/test.json文件,在目標頁面下fetch獲取這個json文件里的數(shù)據(jù):
fetch("../static/test.json") .then(res => res.json()) .then(res => { //獲取到了數(shù)據(jù) }) .catch(err=>{ //解析錯誤或者獲取數(shù)據(jù)失敗 })
ok,就這么簡單,完活了運行起來看看效果(灰常自信);
結(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 正文終于來了(對不起,前戲有點多):
我想把static下所有的靜態(tài)文件原封不動打包帶走,我想到了
安裝完成后在vue.config.js 文件配置一下吧
//引入 const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件 module.exports = { configureWebpack: { plugins: [ new CopyWebpackPlugin({ patterns:[{ from: "./static", to: 'static' }] }) ] } }
ok,就這么簡單,完活了運行起來看看效果(還是灰常自信):
以上就是遇到這個問題整個解決的思路啦;
到此這篇關(guān)于如何配置vue.config.js 處理static文件夾下的靜態(tài)文件的文章就介紹到這了,更多相關(guān)vue.config.js處理靜態(tài)文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實現(xiàn)未登錄訪問其他頁面自動跳轉(zhuǎn)登錄頁功能(實現(xiàn)步驟)
這篇文章主要介紹了vue實現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07vue-cli項目中img如何使用require動態(tài)獲取圖片
這篇文章主要介紹了vue-cli項目中img如何使用require動態(tài)獲取圖片,具有很好的參考價值,希望對大家有所幫助。2022-09-09使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題
這篇文章主要介紹了使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07vue之el-menu-item如何更改導航菜單欄選中的背景顏色
這篇文章主要介紹了vue之el-menu-item如何更改導航菜單欄選中的背景顏色問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05如何寫好一個vue組件,老夫的一年經(jīng)驗全在這了(推薦)
這篇文章主要介紹了如何寫好一個vue組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05解決vscode?Better?Comments插件在vue文件中不顯示相對應(yīng)的顏色的問題
最近使用了Better?Comments這款插件,發(fā)現(xiàn)在ts文件中可以顯示對應(yīng)的顏色,但在vue文件中并不顯示對應(yīng)顏色?,下面小編給大家分享解決方法,感興趣的朋友跟隨小編一起看看吧2022-09-09