最近開發過程中遇到個小需求，需要根據需求動態配置一些靜態資料，但我不想直接把這個靜態檔案引入進來，build時就會把資料打包到js檔案中，造成js檔案很大；呃呃。。。。（ps:就想給自己找點彆扭）
回頭看一下專案，果斷的在根目錄下建立一個static/test.json檔案,在目標頁面下fetch獲取這個json檔案裡的資料：

fetch("../static/test.json")
.then(res => res.json())
.then(res => {
//獲取到了資料
})
.catch(err=>{
//解析錯誤或者獲取資料失敗
})

ok，就這麼簡單，完活了執行起來看看效果（灰常自信）；

結果現實給了我一記記大嘴巴子；
他居然走了catch error，開啟瀏覽器檢視一下

結果狀態是200，fetch請求沒有什麼問題，那就可能是json檔案路徑有問題，它不想讓我找到，居然和我躲貓貓；我這小脾氣怎麼能忍，結果又一個 2000 years later。。。。

我發現在我build完後，打包好的專案中沒有test.json檔案，因為我用的是vue-cli 3.x 構建的專案，在不引用的情況下，不會把這個靜態檔案打包帶走的，所以 真想只有一個，不是人家在躲貓貓，是我根本就沒帶人家玩。

so 正文終於來了（對不起，前戲有點多）：

我想把static下所有的靜態檔案原封不動打包帶走，我想到了

copy-webpack-plugin

安裝完成後在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資料夾下的靜態檔案的文章就介紹到這了,更多相關vue.config.js處理靜態檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！