vue腳手架建立專案沒有靜態檔案怎麼回事

隨著前端技術的不斷發展，越來越多的前端框架被引入我們的日常開發中。在這些框架中，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 專案中正常使用它們了。

方式二：使用 public 資料夾

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中文網其他相關文章！