Nuxt3 - 靜態資產

public

在 Nuxt.js 中，public 資料夾用於存放靜態檔案，這些檔案會被直接映射到應用的根路徑下。例如，你在 public 資料夾下放置了一個 favicon.ico 檔案，那麼你可以透過 http://localhost:3000/favicon.ico 來訪問這個檔案。

在 Nuxt.js 3.8 中使用 public 資料夾的步驟如下：

在你的 Nuxt.js 專案根目錄下建立一個名為 public 的資料夾。
將你需要的靜態檔案放到 public 資料夾下。這些檔案可以是圖片、樣式表、JavaScript 檔案等。
在你的程式碼中，你可以直接使用根路徑來引用這些檔案。例如，如果你有一個 image.jpg 圖片在 public 資料夾下，你可以在你的 HTML 中這樣引用它：<img src="/image.jpg" />。

注意：public 資料夾下的檔案在編譯時會被直接複製到輸出目錄（預設是 dist），並且不會有任何轉換或優化。所以如果你有需要進行轉換或優化的檔案（例如 SASS 或 TypeScript 檔案），那麼你應該將它們放到 assets 資料夾下，而不是 public 資料夾。

官方文件說明： The public/ is served at the server root and contains public files that have to keep their names (e.g. robots.txt) or likely won't change (e.g. favicon.ico).

-| public/
---| favicon.ico
---| og-image.png
---| robots.txt

<script setup>
useSeoMeta({
  ogImage: '/og-image.png'
})
</script>

assets

assets 主要用於存放靜態文件，如圖片、樣式、字體等。以下是如何在 Nuxt3 中使用 assets 的基本步驟：

在 Nuxt3 專案的根目錄下，你會看到一個名為 assets 的資料夾。你可以在此資料夾中添加你的靜態文件。
在你的 Vue 檔案中，你可以通過 ~/assets/ 的路徑來訪問這些靜態文件。例如，如果你有一個名為 image.png 的圖片在 assets 資料夾中，你可以在 Vue 檔案中這樣使用：

<template>
    <img src="~/assets/image.png" />
</template>

對於樣式文件，你可以在 nuxt.config.js 中的 css 屬性裡引入。例如，如果你有一個名為 style.css 的樣式文件在 assets 資料夾中，你可以這樣引入：

export default {
    css: ["~/assets/style.css"],
};

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/_colors.scss" as *;',
                },
            },
        },
    },
});

對於需要進行預處理的樣式文件（如 SCSS 或 Less），你需要安裝相應的 webpack loader，然後你可以像引入普通 CSS 文件一樣引入這些預處理的樣式文件。

Nuxt3 在編譯過程中會對 assets 資料夾中的文件進行優化，包括圖片壓縮、CSS 和 JS 的 minify 等，以提高載入速度和性能。

public​

assets​

public

assets