資料夾介紹

以下只提到切版常用的：

app：

主要內容都會放在這個資料夾裡

app/assets：

裡面放需要經過編譯的內容，例如 css、images

app/components：

存放共用元件的地方，Nuxt 預設會在 /pages 裡自動引入，不必自己寫引入

app/composables：

存放共用程式的地方，Nuxt 預設會在 /pages 裡自動引入，不必自己寫引入

app/layouts：

共用外觀版面，可以存放不同版面範本，預設會使用 default.vue，在 /pages 裡可指定要用哪個版面

app/pages：

頁面主要存放的地方，檔名就是網址路徑，例如/pages/sitemap.vue 這個檔案，如果在網址列輸入：

https://yourdomain.com/sitemap

這頁就會出現 sitemap.vue 的內容

預設版面會使用 app/layouts/default.vue，如果想要選擇其他客製化的版面，可以使用：

definePageMeta({
  layout: 'custom',
})

或是

<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

一般來說不太會去動 Nuxt 幫我們設定的一些行為，例如上面說的自動引入或是資料夾路徑就是網址。

特殊狀況需使用 nuxt.config.ts 或其他設定改變預設行爲。

app.vue：

網站的進入點，如果有使用 app/pages，就不一定要使用app.vue，舉例來說：

• 使用 app.vue 且也有使用 app/pages app.vue 需要設定 <NuxtPage/>

• 使用 app.vue 但 不使用 app/pages 就等於是單頁應用

• 不使用app.vue 但 使用 app/pages 在 app/pages 裡要有 index.vue 作為首頁

另外，app.vue 預設會使用 app/layouts/default.vue 當作版面

public

存放幾乎不會變動的資源，如 favicon，並且擺放在這裡的東西，可以直接使用網址＋檔名直接存取，例如：https://yourdomain.com/favicon.ico

.env 系列

根據公司的使用習慣，制定CICD的環境變數

通常不會加入版本控管，但習慣上會將常用的變數寫成範本方便使用，例如 .env.example

然後在 .gitignore 排除 .env.example，這樣就可以將此範本上傳

.gitignore

把不想要納入版本控管的資料寫在這個檔案裡

.npmrc

控制 npm 到哪個網址下載檔案，或是做其他設定

可以通過以下指令查詢目前使用的網誌

npm get registry

nuxt.config.ts

設定 nuxt 環境、套件等

package.json 和 package-lock.json

npm 依照此 json 檔管理套件

參考來源

• https://nuxt.com/docs/4.x/directory-structure