Vite Vue SSr 專案

Vite Vue SSr 專案

安裝

Vite 需要Node.js版本 14.18+、16+。但是，某些模板需要更高的 Node.js 版本才能運作
官網
參考資料

1
2
3
4
5
6
7
npm create vite-extra@latest 專案名稱

yarn create vite-extra 專案名稱

pnpm create vite-extra 專案名稱

deno run -A npm:create-vite-extra

Streaming 串流媒體
Non-streaming非串流媒體

index.html//為 Vite的進入點
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
├── node_modules // 安裝的所有套件
├── package.json //整個專案的設定檔
├── package-lock.json //整個專案的設定檔
├── public
│   └── favicon.ico
├── env 環境變數資料夾
│   └── .env.development 開發中環境變數
│   └── .env.production 正式環境變數
│   └── .env.staging 測試環境變數
│
├── README.md
├── src
│   ├── App.vue
│   ├── entry-client.ts //客戶端
│   ├── entry-server.ts//伺服器
│   ├── assets //放靜態資源
│   ├── components //子元件
│   │──layouts //佈局  
├── main.ts //進入點
│   ├── router//路由
│   │   └── router.ts //路由
│   ├── stores//Pinina 狀態管理庫
│   │
│   └── views
│   └── type //屬性設定
│        ├── engineering.ts
│   └── filter //過濾
│
└── vite.config.js // Vite 的設定檔

main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createSSRApp } from 'vue'
import App from './App.vue'

// SSR requires a fresh app instance per request, therefore we export a function
//每個請求都需要一個新的應用程式實例，因此我們匯出一個函數
// that creates a fresh app instance. If using Vuex, we'd also be creating a
// fresh store here.

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

package.json啟動指令

1
2
3
4
"scripts": {
  "build:client": "vite build --ssrManifest --outDir dist/client",
  "build:server": "vite build --ssr src/entry-server.ts --outDir dist/server",
}

啟動指令

1
2
npm run build:client ＝>dist/client會多出這個資料夾
npm run build:server =>dist/server"會多出這個資料夾

注意：server.js Constants 的port 如果重複就會出現白幕（完全沒顯示任何…，