Start the development server with HMR:
npm run dev1.造成水合問題 chrome插件必須關掉
ColorZilla / Material DevTools Theme Collection
2.解決終端機會 噴錯誤
解法：建立 .well-known 靜態資料夾（正式且乾淨的方式）
public/
└── .well-known/
└── appspecific/
└── com.chrome.devtools.json
✔ Step 2：新增 JSON 內容（隨便都可以）
{
"devtools": true
}
3.tsconfig 已經有寫
"paths": {
"~/*": ["./app/*"]
},
使用 ~ 代替 @ 路徑習慣project-root/
│
├─ app/
│ ├─ assets/
│ │ └─ index.css
│ │
│ ├─ components/
│ │ ├─ Navbar.tsx
│ │ └─ welcome/
│ │ └─ Router.tsx
│ │
│ ├─ layout/
│ │ ├─ Document.tsx ← HTML 結構（<html>、<head>、<body>）
│ │ └─ Default.tsx ← 全站 Layout（Navbar + children）
│ │
│ ├─ routes/
│ │ ├─ Home.tsx ← /
│ │ ├─ About.tsx ← /about
│ │ ├─ Contact.tsx ← /contact
│ │ ├─ Product.tsx ← /product
│ │ └─ routes.ts ← v7 Route 設定檔（index(), route()）
│ │
│ └─ root.tsx ← **最核心檔案（SSR Layout / meta / links / ErrorBoundary）**
│
├─ public/
│ └─ .well-known/
│ └─ appspecific/
│ └─ com.chrome.devtools.json ← 防止 Chrome DevTools 錯誤
│
├─ vite.config.ts ← 前端建置設定
├─ package.json
└─ tsconfig.jsonroot.tsx
│
│-- export function Layout() ← 包住 Document + Default
│ │
│ └── Document.tsx ← 專門負責 HTML 文檔（SSR）
│ │
│ └── Default.tsx ← 全站 UI：Navbar + children
│ │
│ └── App (default export)
│ │
│ └── <Outlet /> ← 子路由渲染點
│
└-- meta(), links(), ErrorBoundary()routes.ts ← 各頁面pages
root.tsx ← 核心檔案
layout/Default.tsx ← SEO HTML 結構
layout/Document.tsx ← 全站 Layout