昨天介紹了 SEO 資訊的配置方式，今天來介紹 Nuxt3 的 config 檔還有哪些設定可以使用。

alias

Vue 需要額外設定的路徑簡寫在 Nuxt 裡面都已經預設了，基本上非常夠用，不太需要額外增加，以下是預設值。

{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

app

許多的設定都是在 app 的底下（包含昨天介紹的 SEO)。

baseURL

專案的發佈後的 URL 預設是根目錄（/），有時候會發佈在持有網域底下的目錄上就可以使用這個設定，設定方式如下：

app: {
  baseURL: "dir_name"
}

如果專案的 dev, beta...等版本都設定不同路徑，也可以使用 NUXT_APP_BASE_URL 這個指定參數來動態設置路徑。

// package.json
{
  "scripts": {
      "build": "NUXT_APP_BASE_URL=/dir_name/ nuxt build"
      // ...
  }
  // ...
}

baseURL 有個小小的坑未來不知道會不會修正，如果不是發佈在根目錄，頁面中的超連結設置 target=" _blank" 並且連結到同網域的路徑時並不會自動帶上 baseURL 路徑（例如：在 a.b.c/nuxt 開啟新分頁連結到 a.b.c/nuxt/some，如果 href 內只寫了 some，連結就會變成 a.b.c/some)，而這個問題在 run dev 時並不會出現，只有在 build 之後才會發生。
暫時的解法就是用 useRuntimeConfig 方法來取得 baseURL，再額外處理連結字串。

buildAssetsDir

專案建置後的檔案存放路徑，預設值是/_nuxt/，一般不會特別改動。

cdnURL

用來配置引入的 CDN 絕對路徑，也可以使用 NUXT_APP_CDN_URL 這個指定參數來動態設置路徑。

app 中其他對應到 Vue3 的功能

• keepalive: 預設值是關閉。Vue3 參考文件 - KeepAlive
• layoutTransition、pageTransition: 對應到 transition。Vue3 參考文件 - Transition

runtimeConfig

可以用來設定執行期間的環境變數，設置為 private 可以避免在前端（用戶端）暴露，用來放特定 api 的 token 之類的資訊，設置 app 或是 public 的則會暴露在前端環境。

頁面中可以使用 useRuntimeConfig 方法來取用環境變數（僅在server端生效）。

{
  "public": {},
  "app": {
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

還有一大堆設定可以調整

nuxt.config 的設定項目真的非常多，這邊只介紹比較有機會用到的，其他特別的配置都可以到 官方文件 查詢。