隨著前端技術的不斷發展，越來越多的前端框架被引入我們的日常開發中。在這些框架中，Vue.js 作為一個快速輕量級的前端架構越來越受到開發者的青睞。在 Vue.js 的開發過程中，我們通常會使用 Vue CLI 這個官方的鷹架來創建專案。然而，在某些情況下，當我們使用 Vue CLI 建立專案後，發現並沒有產生靜態資料夾，可能會讓新手開發者感到困惑。本文將會帶你了解通常遇到的這種問題的解決方式。
首先來了解為什麼會出現這種情況。當我們透過 Vue CLI 建立一個新專案時，Vue CLI 會將一些預設設定和結構初始化為專案的基礎檔案。這些檔案都包含在專案的根目錄下的一個名為 src 的資料夾中。預設情況下，Vue CLI 並不會為我們產生包含靜態檔案的資料夾。所以當我們試圖透過存取靜態資料夾資源，如 CSS 或 JavaScript 文件，通常會看到一個 404 個錯誤頁面。
那麼，如何在 Vue CLI 建立的專案中新增靜態資料夾呢？以下介紹兩種不同的方法：
首先，我們需要在專案的根目錄下手動建立一個名為 static 的資料夾。這個資料夾將用來儲存靜態資源檔案。可以在 static 資料夾下建立一些子資料夾，用於存放不同類型的靜態資源。例如，我們可以建立一個 CSS 資料夾並將所有的 CSS 檔案存放在其中；也可以建立一個 images 資料夾來儲存所有圖片資源。
要讓 Vue CLI 知道我們已經建立了靜態資料夾，我們需要在根目錄下找到一個名為 vue.config.js 的文件，並將其開啟。如果你沒有該文件，則需要手動建立它。在 vue.config.js 檔案中加入以下程式碼：
module.exports = {
chainWebpack: config => {
config
.plugin('copy')
.tap(args => {
args[0][0].from = 'static'
return args
})
}
}這段程式碼告訴 Vue CLI 在建置專案時將 static 資料夾中的所有內容複製到專案的根目錄下。現在，你就可以將你的靜態資源檔案放入 static 資料夾中，並在 Vue.js 專案中正常使用它們了。
Vue CLI 也提供了另一種將靜態檔案加入專案的方式。這種方式是將靜態檔案存放在 public 資料夾中。 public 資料夾不同於 src 資料夾，不會被編譯和打包到最終的專案中。相反，它們將被複製到最終建置的專案根目錄下。
要使用這種方式，我們只需要將靜態資源檔案放入public 資料夾中，再像下面這樣在我們的HTML 檔案中使用它們：
<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">
需要注意的是，在Vue CLI 3 中，如果我們將靜態檔案存放在public 資料夾中，我們無需在vue.config.js 檔案中做任何設定。
總結
在 Vue.js 的開發過程中，我們通常會使用 Vue CLI 這個官方的鷹架來建立專案。當我們使用 Vue CLI 建立專案後，如果發現沒有產生靜態資料夾，我們可以透過手動建立 static 資料夾或使用 public 資料夾來新增靜態檔案。如果您是正在學習 Vue.js 的新手開發者，相信本文對您可以有所幫助。
以上是vue腳手架建立專案沒有靜態檔案怎麼回事的詳細內容。更多資訊請關注PHP中文網其他相關文章！
