Nuxt3 變更預設 Port

以下內容在 Nuxt 3.8.2 版本下測試

開發 Port (package.json)

如果是在開發時想調整 Nuxt3 的 port ，可以直接修改 package.json 在 nuxt dev 後建加上 port 的設定：

    
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port 8000",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  }
}
    

這樣在使用 npm run dev 時就會使用 8000 port 執行

修改 nuxt.config.ts

    
export default defineNuxtConfig({
  devServer: {
    port: 3030,
  },
})

    

環境變數

在專案根目錄建立 .env 檔案，加入以下內容即可變更 port，在正式環境(生產環境)中建議使用此做法

    
PORT=8080
HOST=0.0.0.0
    

優先順序為 package.json > .env > nuxt.config.ts

參考資料：
GitHub nuxt/nuxt - discussions #15910
StackOverflow - Nuxt3 Vite server port