commit
f7f66eaafc
29 changed files with 1457 additions and 0 deletions
@ -0,0 +1,175 @@ |
|||
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore |
|||
|
|||
# Logs |
|||
|
|||
logs |
|||
_.log |
|||
npm-debug.log_ |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
lerna-debug.log* |
|||
.pnpm-debug.log* |
|||
|
|||
# Caches |
|||
|
|||
.cache |
|||
|
|||
# Diagnostic reports (https://nodejs.org/api/report.html) |
|||
|
|||
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json |
|||
|
|||
# Runtime data |
|||
|
|||
pids |
|||
_.pid |
|||
_.seed |
|||
*.pid.lock |
|||
|
|||
# Directory for instrumented libs generated by jscoverage/JSCover |
|||
|
|||
lib-cov |
|||
|
|||
# Coverage directory used by tools like istanbul |
|||
|
|||
coverage |
|||
*.lcov |
|||
|
|||
# nyc test coverage |
|||
|
|||
.nyc_output |
|||
|
|||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) |
|||
|
|||
.grunt |
|||
|
|||
# Bower dependency directory (https://bower.io/) |
|||
|
|||
bower_components |
|||
|
|||
# node-waf configuration |
|||
|
|||
.lock-wscript |
|||
|
|||
# Compiled binary addons (https://nodejs.org/api/addons.html) |
|||
|
|||
build/Release |
|||
|
|||
# Dependency directories |
|||
|
|||
node_modules/ |
|||
jspm_packages/ |
|||
|
|||
# Snowpack dependency directory (https://snowpack.dev/) |
|||
|
|||
web_modules/ |
|||
|
|||
# TypeScript cache |
|||
|
|||
*.tsbuildinfo |
|||
|
|||
# Optional npm cache directory |
|||
|
|||
.npm |
|||
|
|||
# Optional eslint cache |
|||
|
|||
.eslintcache |
|||
|
|||
# Optional stylelint cache |
|||
|
|||
.stylelintcache |
|||
|
|||
# Microbundle cache |
|||
|
|||
.rpt2_cache/ |
|||
.rts2_cache_cjs/ |
|||
.rts2_cache_es/ |
|||
.rts2_cache_umd/ |
|||
|
|||
# Optional REPL history |
|||
|
|||
.node_repl_history |
|||
|
|||
# Output of 'npm pack' |
|||
|
|||
*.tgz |
|||
|
|||
# Yarn Integrity file |
|||
|
|||
.yarn-integrity |
|||
|
|||
# dotenv environment variable files |
|||
|
|||
.env |
|||
.env.development.local |
|||
.env.test.local |
|||
.env.production.local |
|||
.env.local |
|||
|
|||
# parcel-bundler cache (https://parceljs.org/) |
|||
|
|||
.parcel-cache |
|||
|
|||
# Next.js build output |
|||
|
|||
.next |
|||
out |
|||
|
|||
# Nuxt.js build / generate output |
|||
|
|||
.nuxt |
|||
dist |
|||
|
|||
# Gatsby files |
|||
|
|||
# Comment in the public line in if your project uses Gatsby and not Next.js |
|||
|
|||
# https://nextjs.org/blog/next-9-1#public-directory-support |
|||
|
|||
# public |
|||
|
|||
# vuepress build output |
|||
|
|||
.vuepress/dist |
|||
|
|||
# vuepress v2.x temp and cache directory |
|||
|
|||
.temp |
|||
|
|||
# Docusaurus cache and generated files |
|||
|
|||
.docusaurus |
|||
|
|||
# Serverless directories |
|||
|
|||
.serverless/ |
|||
|
|||
# FuseBox cache |
|||
|
|||
.fusebox/ |
|||
|
|||
# DynamoDB Local files |
|||
|
|||
.dynamodb/ |
|||
|
|||
# TernJS port file |
|||
|
|||
.tern-port |
|||
|
|||
# Stores VSCode versions used for testing VSCode extensions |
|||
|
|||
.vscode-test |
|||
|
|||
# yarn v2 |
|||
|
|||
.yarn/cache |
|||
.yarn/unplugged |
|||
.yarn/build-state.yml |
|||
.yarn/install-state.gz |
|||
.pnp.* |
|||
|
|||
# IntelliJ based IDEs |
|||
.idea |
|||
|
|||
# Finder (MacOS) folder config |
|||
.DS_Store |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"CodeFree.index": true |
|||
} |
|||
@ -0,0 +1 @@ |
|||
# 基于koa实现的简易ssr |
|||
Binary file not shown.
@ -0,0 +1,17 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>Vite + Vue + TS</title> |
|||
<!--app-head--> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="app"><!--app-html--></div> |
|||
<script type="module" src="/src/entry-client.ts"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,30 @@ |
|||
{ |
|||
"name": "koa-ssr", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "bun run --watch server.ts", |
|||
"build": "npm run build:client && npm run build:server", |
|||
"build:client": "vite build --outDir dist/client", |
|||
"build:server": "vite build --ssr src/entry-server.ts --outDir dist/server", |
|||
"preview": "cross-env NODE_ENV=production bun run server.ts", |
|||
"check": "vue-tsc" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/bun": "latest", |
|||
"@types/koa": "^3.0.0", |
|||
"@types/koa-send": "^4.1.6", |
|||
"cross-env": "^10.1.0", |
|||
"vue-tsc": "^3.1.0" |
|||
}, |
|||
"peerDependencies": { |
|||
"typescript": "^5.0.0" |
|||
}, |
|||
"dependencies": { |
|||
"@vitejs/plugin-vue": "^6.0.1", |
|||
"koa": "^3.0.1", |
|||
"koa-connect": "^2.1.0", |
|||
"koa-send": "^5.0.1", |
|||
"vite": "^7.1.7", |
|||
"vue": "^3.5.22" |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,84 @@ |
|||
import fs from 'node:fs/promises' |
|||
import c2k from 'koa-connect' |
|||
import type { ViteDevServer } from 'vite' |
|||
import Send from 'koa-send' |
|||
import app from "./server/app" |
|||
import { bootstrapServer } from "./server/main" |
|||
|
|||
// Constants
|
|||
const isProduction = process.env.NODE_ENV === 'production' |
|||
const port = process.env.PORT || 5173 |
|||
const base = process.env.BASE || '/' |
|||
|
|||
bootstrapServer() |
|||
|
|||
// Cached production assets
|
|||
const templateHtml = isProduction |
|||
? await fs.readFile('./dist/client/index.html', 'utf-8') |
|||
: '' |
|||
|
|||
let vite: ViteDevServer |
|||
if (!isProduction) { |
|||
const { createServer } = await import('vite') |
|||
vite = await createServer({ |
|||
server: { middlewareMode: true }, |
|||
appType: 'custom', |
|||
base, |
|||
}) |
|||
app.use(c2k(vite.middlewares)) |
|||
} else { |
|||
app.use(async (ctx, next) => { |
|||
await Send(ctx, ctx.path, { root: './dist/client', index: false }); |
|||
if (ctx.status === 404) { |
|||
await next() |
|||
} |
|||
}) |
|||
} |
|||
|
|||
app.use(async (ctx, next) => { |
|||
// if (!ctx.originalUrl.startsWith(base)) return await next()
|
|||
try { |
|||
const url = ctx.originalUrl.replace(base, '') |
|||
let template |
|||
let render |
|||
if (!isProduction) { |
|||
// Always read fresh template in development
|
|||
template = await fs.readFile('./index.html', 'utf-8') |
|||
template = await vite.transformIndexHtml(url, template) |
|||
render = (await vite.ssrLoadModule('/src/entry-server.ts')).render |
|||
} else { |
|||
template = templateHtml |
|||
// @ts-ignore
|
|||
render = (await import('./dist/server/entry-server.js')).render |
|||
} |
|||
|
|||
// 解析请求 Cookie 到对象（复用通用工具）
|
|||
const { parseCookieHeader } = await import('./src/compose/cookieUtils') |
|||
const cookies = parseCookieHeader(ctx.request.headers['cookie'] as string) |
|||
|
|||
const rendered = await render(url, { cookies }) |
|||
|
|||
const html = template |
|||
.replace(`<!--app-head-->`, rendered.head ?? '') |
|||
.replace(`<!--app-html-->`, rendered.html ?? '') |
|||
ctx.status = 200 |
|||
ctx.set({ 'Content-Type': 'text/html' }) |
|||
ctx.body = html |
|||
|
|||
// 设置服务端渲染期间收集到的 Set-Cookie
|
|||
const setCookies: string[] = (rendered as any).setCookies || [] |
|||
if (setCookies.length > 0) { |
|||
ctx.set('Set-Cookie', setCookies) |
|||
} |
|||
} catch (e: Error | any) { |
|||
vite?.ssrFixStacktrace(e) |
|||
ctx.status = 500 |
|||
ctx.body = e.stack |
|||
} |
|||
await next() |
|||
}) |
|||
|
|||
// Start http server
|
|||
app.listen(port, () => { |
|||
console.log(`Server started at http://localhost:${port}`) |
|||
}) |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
import Koa from "koa" |
|||
|
|||
const app = new Koa() |
|||
|
|||
export default app |
|||
export { |
|||
app |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
import { parseCookieHeader, serializeCookie } from "../src/compose/cookieUtils"; |
|||
import app from "./app"; |
|||
|
|||
export function bootstrapServer() { |
|||
async function fetchFirstSuccess(urls) { |
|||
for (const url of urls) { |
|||
try { |
|||
const res = await fetch(url, { |
|||
method: "get", |
|||
mode: "cors", |
|||
redirect: "follow", |
|||
}); |
|||
if (!res.ok) continue; |
|||
const contentType = res.headers.get("content-type") || ""; |
|||
let data, type; |
|||
if (contentType.includes("application/json")) { |
|||
data = await res.json(); |
|||
type = "json"; |
|||
} else if (contentType.includes("text/")) { |
|||
data = await res.text(); |
|||
type = "text"; |
|||
} else { |
|||
data = await res.blob(); |
|||
type = "blob"; |
|||
} |
|||
return { type, data }; |
|||
} catch (e) { |
|||
// ignore and try next url
|
|||
} |
|||
} |
|||
throw new Error("All requests failed"); |
|||
} |
|||
|
|||
app.use(async (ctx, next) => { |
|||
const cookies = parseCookieHeader(ctx.request.headers.cookie as string); |
|||
|
|||
// 读取
|
|||
const token = cookies["demo_2token"]; |
|||
|
|||
// 写入（HttpOnly 更安全）
|
|||
if (!token) { |
|||
const setItem = serializeCookie("demo_2token", "from-mw", { |
|||
httpOnly: true, |
|||
path: "/", |
|||
sameSite: "lax", |
|||
}); |
|||
ctx.set("Set-Cookie", [setItem]); |
|||
} |
|||
if (ctx.originalUrl !== "/api/pics/random") return await next(); |
|||
const { type, data } = await fetchFirstSuccess([ |
|||
"https://api.miaomc.cn/image/get", |
|||
]); |
|||
if (type === "blob") { |
|||
ctx.set("Content-Type", "image/jpeg"); |
|||
// 下载
|
|||
// ctx.set("Content-Disposition", "attachment; filename=random.jpg")
|
|||
ctx.body = data; |
|||
} |
|||
}); |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
<script setup lang="ts"> |
|||
// This starter template is using Vue 3 <script setup> SFCs |
|||
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup |
|||
import HelloWorld from './components/HelloWorld.vue'; |
|||
import CookieDemo from './components/CookieDemo.vue'; |
|||
import DataFetch from './components/DataFetch.vue'; |
|||
import SimpleTest from './components/SimpleTest.vue'; |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<a href="https://vite.dev" target="_blank"> |
|||
<img src="/vite.svg" class="logo" alt="Vite logo" />AAA |
|||
</a> |
|||
<a href="https://vuejs.org/" target="_blank"> |
|||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> |
|||
</a> |
|||
</div> |
|||
<HelloWorld msg="Vite + Vue" /> |
|||
<CookieDemo /> |
|||
<SimpleTest /> |
|||
<DataFetch /> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
} |
|||
.logo.vue:hover { |
|||
filter: drop-shadow(0 0 2em #42b883aa); |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,50 @@ |
|||
<template> |
|||
<div class="cookie-demo"> |
|||
<div class="btns"> |
|||
<button @click="setCookie">设置 cookie</button> |
|||
<button @click="removeCookie">删除 cookie</button> |
|||
</div> |
|||
<small>服务端首屏会尝试设置缺失的 HttpOnly cookie，客户端不可读。</small> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { onMounted, onServerPrefetch } from 'vue' |
|||
import { useCookie } from '../compose/useCookie' |
|||
|
|||
const cookie = useCookie('demo_token', { path: '/', sameSite: 'lax' }) |
|||
// 不在页面上渲染 cookie 值，避免 HttpOnly 场景下的水合不一致 |
|||
|
|||
// 服务端：如果没有 cookie，设置一个默认值（演示 SSR 写入 Set-Cookie） |
|||
onServerPrefetch(async () => { |
|||
const v = cookie.get() |
|||
if (!v) { |
|||
// 仅服务端设置 HttpOnly，客户端无法读取 |
|||
cookie.set('from-ssr', { httpOnly: true }) |
|||
} |
|||
}) |
|||
|
|||
// 客户端：水合后读取现有值 |
|||
onMounted(() => { |
|||
// 客户端不读取也不展示值 |
|||
}) |
|||
|
|||
function setCookie() { |
|||
const rnd = Math.random().toString(36).slice(2, 8) |
|||
cookie.set(`client-${rnd}`) |
|||
} |
|||
|
|||
function removeCookie() { |
|||
cookie.remove() |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.cookie-demo { padding: 12px; border: 1px solid #eee; border-radius: 8px; } |
|||
.btns { display: flex; gap: 8px; margin: 8px 0; } |
|||
button { padding: 6px 10px; cursor: pointer; } |
|||
code { background: #f6f8fa; padding: 2px 6px; border-radius: 4px; } |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<div class="data-fetch"> |
|||
<h2>数据获取示例</h2> |
|||
|
|||
<!-- 调试信息 --> |
|||
<div class="debug-info"> |
|||
<p><strong>水合状态:</strong> {{ isHydrated ? '已水合' : '未水合' }}</p> |
|||
<p><strong>缓存键:</strong> user-1</p> |
|||
</div> |
|||
|
|||
<div v-if="pending" class="loading"> |
|||
加载中... |
|||
</div> |
|||
|
|||
<div v-else-if="error" class="error"> |
|||
错误: {{ error.message }} |
|||
<button @click="refresh">重试</button> |
|||
</div> |
|||
|
|||
<div v-else-if="data" class="data"> |
|||
<h3>用户信息</h3> |
|||
<pre>{{ JSON.stringify(data, null, 2) }}</pre> |
|||
<button @click="refresh">刷新数据</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue' |
|||
import { useFetch } from '../compose/useFetch' |
|||
|
|||
// 调试状态 |
|||
const isHydrated = ref(false) |
|||
|
|||
onMounted(() => { |
|||
isHydrated.value = true |
|||
}) |
|||
|
|||
// 使用 useFetch hook |
|||
const { data, error, pending, refresh } = useFetch( |
|||
'https://jsonplaceholder.typicode.com/users/1', |
|||
{ |
|||
key: 'user-1', // 缓存键 |
|||
server: true, // 启用服务端预取 |
|||
transform: (userData: any) => ({ |
|||
id: userData.id, |
|||
name: userData.name, |
|||
email: userData.email, |
|||
website: userData.website |
|||
}), |
|||
onError: (err) => { |
|||
console.error('Fetch error:', err) |
|||
} |
|||
} |
|||
) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.data-fetch { |
|||
padding: 20px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8px; |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
.debug-info { |
|||
background: #f0f8ff; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
margin-bottom: 15px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.debug-info p { |
|||
margin: 5px 0; |
|||
} |
|||
|
|||
.loading { |
|||
color: #666; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.error { |
|||
color: #d32f2f; |
|||
background: #ffebee; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.data { |
|||
background: #f5f5f5; |
|||
padding: 15px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
pre { |
|||
background: #fff; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
button { |
|||
background: #1976d2; |
|||
color: white; |
|||
border: none; |
|||
padding: 8px 16px; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
button:hover { |
|||
background: #1565c0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,38 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
|
|||
defineProps<{ msg: string }>(); |
|||
|
|||
const count = ref(0); |
|||
</script> |
|||
|
|||
<template> |
|||
<h1>{{ msg }}</h1> |
|||
|
|||
<div class="card"> |
|||
<button type="button" @click="count++">count 啊啊撒打算 {{ count }}</button> |
|||
<p> |
|||
Edit |
|||
<code>components/HelloWorld.vue</code> to test HMR |
|||
</p> |
|||
</div> |
|||
|
|||
<p> |
|||
Check out |
|||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" |
|||
>create-vue</a |
|||
>, the official Vue + Vite starter |
|||
</p> |
|||
<p> |
|||
Install |
|||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a> |
|||
in your IDE for a better DX |
|||
</p> |
|||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.read-the-docs { |
|||
color: #888; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<div class="simple-test"> |
|||
<h3>简单测试组件</h3> |
|||
<p>数据状态: {{ data ? '已加载' : '未加载' }}</p> |
|||
<p>错误: {{ error ? error.message : '无' }}</p> |
|||
<p>加载中: {{ pending ? '是' : '否' }}</p> |
|||
<div v-if="data" class="data-content"> |
|||
<h4>{{ data.title }}</h4> |
|||
<p>{{ data.body }}</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useFetch } from '../compose/useFetch' |
|||
|
|||
// 使用一个简单的 API 进行测试 |
|||
const { data, error, pending } = useFetch( |
|||
'https://jsonplaceholder.typicode.com/posts/1', |
|||
{ |
|||
key: 'post-1', |
|||
server: true, |
|||
transform: (post: any) => ({ |
|||
id: post.id, |
|||
title: post.title, |
|||
body: post.body.substring(0, 100) + '...' |
|||
}) |
|||
} |
|||
) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.simple-test { |
|||
background: #f9f9f9; |
|||
padding: 15px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.simple-test p { |
|||
margin: 5px 0; |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,170 @@ |
|||
# useFetch SSR Hook |
|||
|
|||
这是一个专为 Vue 3 SSR 应用设计的 `useFetch` hook，支持服务端预取和客户端水合。 |
|||
|
|||
## 特性 |
|||
|
|||
- ✅ **SSR 兼容**: 支持服务端预取和客户端水合 |
|||
- ✅ **数据缓存**: 避免重复请求，提升性能 |
|||
- ✅ **错误处理**: 完整的错误处理机制 |
|||
- ✅ **加载状态**: 内置 loading 状态管理 |
|||
- ✅ **TypeScript**: 完整的类型支持 |
|||
- ✅ **灵活配置**: 支持自定义缓存键、转换函数等 |
|||
|
|||
## 基本用法 |
|||
|
|||
```typescript |
|||
import { useFetch } from './compose/useFetch' |
|||
|
|||
// 基本用法 |
|||
const { data, error, pending, refresh } = useFetch('/api/users') |
|||
|
|||
// 带配置的用法 |
|||
const { data, error, pending, refresh } = useFetch( |
|||
'https://api.example.com/users/1', |
|||
{ |
|||
key: 'user-1', // 缓存键 |
|||
server: true, // 启用服务端预取 |
|||
transform: (data) => ({ // 数据转换 |
|||
id: data.id, |
|||
name: data.name |
|||
}), |
|||
onError: (err) => { // 错误处理 |
|||
console.error(err) |
|||
} |
|||
} |
|||
) |
|||
``` |
|||
|
|||
## API 参考 |
|||
|
|||
### useFetch(url, options?) |
|||
|
|||
#### 参数 |
|||
|
|||
- `url`: `string | (() => string) | (() => Promise<string>)` - 请求 URL |
|||
- `options`: `UseFetchOptions` - 配置选项 |
|||
|
|||
#### 返回值 |
|||
|
|||
- `data`: `Ref<T | null>` - 响应数据 |
|||
- `error`: `Ref<Error | null>` - 错误信息 |
|||
- `pending`: `Ref<boolean>` - 加载状态 |
|||
- `refresh()`: `() => Promise<void>` - 刷新数据 |
|||
- `execute()`: `() => Promise<void>` - 手动执行请求 |
|||
|
|||
### UseFetchOptions |
|||
|
|||
```typescript |
|||
interface UseFetchOptions { |
|||
key?: string // 缓存键 |
|||
server?: boolean // 是否启用服务端预取 |
|||
default?: () => any // 默认值 |
|||
transform?: (data: any) => any // 数据转换函数 |
|||
onError?: (error: Error) => void // 错误处理函数 |
|||
} |
|||
``` |
|||
|
|||
## SSR 集成 |
|||
|
|||
### 服务端设置 |
|||
|
|||
在 `entry-server.ts` 中： |
|||
|
|||
```typescript |
|||
import { createSSRContext } from './compose/useFetch' |
|||
|
|||
export async function render(url: string) { |
|||
const { app } = createApp() |
|||
|
|||
// 创建 SSR 上下文 |
|||
const ssrContext = createSSRContext() |
|||
app.config.globalProperties.$ssrContext = ssrContext |
|||
|
|||
const html = await renderToString(app) |
|||
|
|||
// 将数据序列化到 HTML |
|||
const ssrData = JSON.stringify(Array.from(ssrContext.cache?.entries() || [])) |
|||
const head = ` |
|||
<script> |
|||
window.__SSR_CONTEXT__ = { |
|||
cache: new Map(${ssrData}) |
|||
}; |
|||
</script> |
|||
` |
|||
|
|||
return { html, head } |
|||
} |
|||
``` |
|||
|
|||
### 客户端设置 |
|||
|
|||
在 `entry-client.ts` 中： |
|||
|
|||
```typescript |
|||
import { hydrateSSRContext, clearSSRContext } from './compose/useFetch' |
|||
|
|||
// 水合 SSR 数据 |
|||
if (typeof window !== 'undefined' && window.__SSR_CONTEXT__) { |
|||
hydrateSSRContext(window.__SSR_CONTEXT__) |
|||
} |
|||
|
|||
app.mount('#app') |
|||
|
|||
// 水合完成后清理 |
|||
clearSSRContext() |
|||
``` |
|||
|
|||
## 高级用法 |
|||
|
|||
### 动态 URL |
|||
|
|||
```typescript |
|||
const userId = ref(1) |
|||
const { data } = useFetch(() => `/api/users/${userId.value}`) |
|||
``` |
|||
|
|||
### 条件请求 |
|||
|
|||
```typescript |
|||
const shouldFetch = ref(false) |
|||
const { data } = useFetch( |
|||
() => shouldFetch.value ? '/api/data' : null, |
|||
{ server: false } // 禁用服务端预取 |
|||
) |
|||
``` |
|||
|
|||
### 错误处理 |
|||
|
|||
```typescript |
|||
const { data, error, pending } = useFetch('/api/data', { |
|||
onError: (err) => { |
|||
// 自定义错误处理 |
|||
console.error('请求失败:', err) |
|||
// 可以显示用户友好的错误消息 |
|||
} |
|||
}) |
|||
``` |
|||
|
|||
### 数据转换 |
|||
|
|||
```typescript |
|||
const { data } = useFetch('/api/users', { |
|||
transform: (users) => users.map(user => ({ |
|||
id: user.id, |
|||
name: user.name, |
|||
email: user.email |
|||
})) |
|||
}) |
|||
``` |
|||
|
|||
## 注意事项 |
|||
|
|||
1. **缓存键**: 确保为不同的请求使用唯一的缓存键 |
|||
2. **服务端预取**: 只在需要 SEO 或首屏性能的场景下启用 |
|||
3. **错误处理**: 始终提供错误处理逻辑 |
|||
4. **内存管理**: 在 SPA 模式下注意清理不需要的缓存 |
|||
|
|||
## 示例 |
|||
|
|||
查看 `src/components/DataFetch.vue` 获取完整的使用示例。 |
|||
@ -0,0 +1,65 @@ |
|||
export type CookieOptions = { |
|||
path?: string |
|||
domain?: string |
|||
expires?: Date | string | number |
|||
maxAge?: number |
|||
secure?: boolean |
|||
httpOnly?: boolean |
|||
sameSite?: 'lax' | 'strict' | 'none' |
|||
} |
|||
|
|||
export function serializeCookie(name: string, value: string, options: CookieOptions = {}): string { |
|||
const enc = encodeURIComponent |
|||
let cookie = `${name}=${enc(value)}` |
|||
if (options.maxAge != null) cookie += `; Max-Age=${Math.floor(options.maxAge)}` |
|||
if (options.expires != null) { |
|||
const date = typeof options.expires === 'number' ? new Date(options.expires) : new Date(options.expires) |
|||
cookie += `; Expires=${date.toUTCString()}` |
|||
} |
|||
if (options.domain) cookie += `; Domain=${options.domain}` |
|||
if (options.path) cookie += `; Path=${options.path}` |
|||
if (options.secure) cookie += `; Secure` |
|||
if (options.httpOnly) cookie += `; HttpOnly` |
|||
if (options.sameSite) cookie += `; SameSite=${options.sameSite === 'none' ? 'None' : options.sameSite === 'lax' ? 'Lax' : 'Strict'}` |
|||
return cookie |
|||
} |
|||
|
|||
export function parseCookieHeader(header: string | undefined): Record<string, string> { |
|||
const raw = header || '' |
|||
const out: Record<string, string> = {} |
|||
raw.split(';').map(s => s.trim()).filter(Boolean).forEach(kv => { |
|||
const idx = kv.indexOf('=') |
|||
const k = idx >= 0 ? kv.slice(0, idx) : kv |
|||
const v = idx >= 0 ? decodeURIComponent(kv.slice(idx + 1)) : '' |
|||
out[k] = v |
|||
}) |
|||
return out |
|||
} |
|||
|
|||
export function parseDocumentCookies(): Record<string, string> { |
|||
if (typeof document === 'undefined') return {} |
|||
return parseCookieHeader(document.cookie) |
|||
} |
|||
|
|||
|
|||
/** |
|||
// server 侧中间件
|
|||
import { parseCookieHeader, serializeCookie } from './src/compose/cookieUtils' |
|||
|
|||
app.use(async (ctx, next) => { |
|||
const cookies = parseCookieHeader(ctx.request.headers.cookie as string) |
|||
|
|||
// 读取
|
|||
const token = cookies['demo_token'] |
|||
|
|||
// 写入（HttpOnly 更安全）
|
|||
if (!token) { |
|||
const setItem = serializeCookie('demo_token', 'from-mw', { |
|||
httpOnly: true, path: '/', sameSite: 'lax' |
|||
}) |
|||
ctx.set('Set-Cookie', [setItem]) |
|||
} |
|||
|
|||
await next() |
|||
}) |
|||
*/ |
|||
@ -0,0 +1,41 @@ |
|||
// SSR 上下文与 cookie 管理（与业务无关的通用模块）
|
|||
|
|||
export interface SSRContext { |
|||
cache?: Map<string, any> |
|||
cookies?: Record<string, string> |
|||
setCookies?: string[] |
|||
[key: string]: any |
|||
} |
|||
|
|||
export function createSSRContext(): SSRContext { |
|||
return { |
|||
cache: new Map(), |
|||
cookies: {}, |
|||
setCookies: [] |
|||
} |
|||
} |
|||
|
|||
export function hydrateSSRContext(context: SSRContext): void { |
|||
if (typeof window !== 'undefined') { |
|||
if (context.cache && Array.isArray(context.cache)) { |
|||
context.cache = new Map(context.cache) |
|||
} |
|||
;(window as any).__SSR_CONTEXT__ = context |
|||
} |
|||
} |
|||
|
|||
export function clearSSRContext(): void { |
|||
if (typeof window !== 'undefined') { |
|||
delete (window as any).__SSR_CONTEXT__ |
|||
} |
|||
} |
|||
|
|||
// 通用获取 SSR 上下文（客户端从 window，服务端从 app 实例）
|
|||
export function resolveSSRContext(instance?: any): SSRContext | null { |
|||
if (typeof window !== 'undefined') { |
|||
return (window as any).__SSR_CONTEXT__ || null |
|||
} |
|||
return instance?.appContext?.config?.globalProperties?.$ssrContext || null |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,43 @@ |
|||
import { getCurrentInstance } from 'vue' |
|||
import { serializeCookie, parseDocumentCookies } from './cookieUtils' |
|||
import type { CookieOptions } from './cookieUtils' |
|||
import { resolveSSRContext } from './ssrContext' |
|||
|
|||
export function useCookie(name: string, options: CookieOptions = {}) { |
|||
const instance = getCurrentInstance() |
|||
|
|||
const getSSRContext = () => resolveSSRContext(instance) |
|||
|
|||
const getAll = (): Record<string, string> => { |
|||
const ssr = getSSRContext() |
|||
if (ssr && ssr.cookies) return ssr.cookies as Record<string, string> |
|||
return parseDocumentCookies() |
|||
} |
|||
|
|||
const get = (): string | undefined => { |
|||
const all = getAll() |
|||
return all[name] |
|||
} |
|||
|
|||
const set = (value: string, opt: CookieOptions = {}) => { |
|||
const o = { path: '/', ...options, ...opt } |
|||
const str = serializeCookie(name, value, o) |
|||
const ssr = getSSRContext() |
|||
if (ssr) { |
|||
ssr.cookies = ssr.cookies || {} |
|||
ssr.cookies[name] = value |
|||
ssr.setCookies = ssr.setCookies || [] |
|||
ssr.setCookies.push(str) |
|||
} else if (typeof document !== 'undefined') { |
|||
document.cookie = str |
|||
} |
|||
} |
|||
|
|||
const remove = (opt: CookieOptions = {}) => { |
|||
set('', { ...opt, maxAge: 0, expires: new Date(0) }) |
|||
} |
|||
|
|||
return { get, set, remove } |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,249 @@ |
|||
import { ref, onMounted, onServerPrefetch, Ref } from 'vue' |
|||
import { getCurrentInstance } from 'vue' |
|||
import type { SSRContext } from './ssrContext' |
|||
import { resolveSSRContext } from './ssrContext' |
|||
|
|||
// 全局数据缓存，用于 SSR 数据共享
|
|||
const globalCache = new Map<string, any>() |
|||
|
|||
// SSR 上下文类型从 ssrContext.ts 引入
|
|||
|
|||
// useFetch 的配置选项
|
|||
interface UseFetchOptions { |
|||
key?: string |
|||
server?: boolean |
|||
default?: () => any |
|||
transform?: (data: any) => any |
|||
onError?: (error: Error) => void |
|||
} |
|||
|
|||
// useFetch 返回值类型
|
|||
interface UseFetchReturn<T> { |
|||
data: Ref<T | null> |
|||
error: Ref<Error | null> |
|||
pending: Ref<boolean> |
|||
refresh: () => Promise<void> |
|||
execute: () => Promise<void> |
|||
} |
|||
|
|||
/** |
|||
* SSR 兼容的 useFetch hook |
|||
* 支持服务端预取和客户端水合 |
|||
*/ |
|||
export function useFetch<T = any>( |
|||
url: string | (() => string) | (() => Promise<string>), |
|||
options: UseFetchOptions = {} |
|||
): UseFetchReturn<T> { |
|||
const { |
|||
key, |
|||
server = true, |
|||
default: defaultValue, |
|||
transform, |
|||
onError |
|||
} = options |
|||
|
|||
// 生成缓存键
|
|||
const cacheKey = key || (typeof url === 'string' ? url : `fetch-${Date.now()}`) |
|||
|
|||
// 响应式状态
|
|||
const data = ref<T | null>(null) |
|||
const error = ref<Error | null>(null) |
|||
const pending = ref(false) |
|||
|
|||
// 获取当前组件实例
|
|||
const instance = getCurrentInstance() |
|||
|
|||
// 获取 SSR 上下文
|
|||
const getSSRContext = (): SSRContext | null => resolveSSRContext(instance) |
|||
|
|||
// 获取缓存
|
|||
const getCache = () => { |
|||
const ssrContext = getSSRContext() |
|||
return ssrContext?.cache || globalCache |
|||
} |
|||
|
|||
// 设置缓存
|
|||
const setCache = (key: string, value: any) => { |
|||
const cache = getCache() |
|||
cache.set(key, value) |
|||
} |
|||
|
|||
// 获取缓存数据
|
|||
const getCachedData = () => { |
|||
const cache = getCache() |
|||
return cache.get(cacheKey) |
|||
} |
|||
|
|||
// 执行 fetch 请求
|
|||
const execute = async (): Promise<void> => { |
|||
try { |
|||
pending.value = true |
|||
error.value = null |
|||
|
|||
// 获取 URL
|
|||
const fetchUrl = typeof url === 'function' ? await url() : url |
|||
|
|||
// 仅在服务端注入 Cookie，客户端浏览器会自动携带
|
|||
let requestInit: RequestInit | undefined |
|||
if (typeof window === 'undefined') { |
|||
const ssrContext = getSSRContext() |
|||
const cookieHeader = ssrContext?.cookies |
|||
? Object.entries(ssrContext.cookies) |
|||
.filter(([k, v]) => k && v != null) |
|||
.map(([k, v]) => `${k}=${String(v)}`) |
|||
.join('; ') |
|||
: undefined |
|||
if (cookieHeader) { |
|||
requestInit = { headers: { Cookie: cookieHeader } } |
|||
} |
|||
} |
|||
|
|||
// 执行请求
|
|||
const response = await fetch(fetchUrl, requestInit) |
|||
|
|||
if (!response.ok) { |
|||
throw new Error(`HTTP ${response.status}: ${response.statusText}`) |
|||
} |
|||
|
|||
let result = await response.json() |
|||
|
|||
// 应用转换函数
|
|||
if (transform) { |
|||
result = transform(result) |
|||
} |
|||
|
|||
data.value = result |
|||
setCache(cacheKey, result) |
|||
|
|||
// 收集服务端返回的 Set-Cookie，回传到最终响应头
|
|||
if (typeof window === 'undefined') { |
|||
const ssrContext = getSSRContext() |
|||
if (ssrContext) { |
|||
const setCookieValues: string[] = [] |
|||
const anyHeaders: any = response.headers as any |
|||
// undici 扩展：getSetCookie()
|
|||
if (typeof anyHeaders?.getSetCookie === 'function') { |
|||
try { |
|||
const arr = anyHeaders.getSetCookie() |
|||
if (Array.isArray(arr)) setCookieValues.push(...arr) |
|||
} catch {} |
|||
} |
|||
// node-fetch/raw headers API
|
|||
if (typeof anyHeaders?.raw === 'function') { |
|||
try { |
|||
const raw = anyHeaders.raw() |
|||
const arr = raw?.['set-cookie'] |
|||
if (Array.isArray(arr)) setCookieValues.push(...arr) |
|||
} catch {} |
|||
} |
|||
// 兜底：单值
|
|||
const single = response.headers.get('set-cookie') |
|||
if (single) setCookieValues.push(single) |
|||
|
|||
if (setCookieValues.length) { |
|||
if (!Array.isArray(ssrContext.setCookies)) ssrContext.setCookies = [] |
|||
ssrContext.setCookies.push(...setCookieValues) |
|||
} |
|||
} |
|||
} |
|||
|
|||
} catch (err) { |
|||
const fetchError = err instanceof Error ? err : new Error(String(err)) |
|||
error.value = fetchError |
|||
|
|||
if (onError) { |
|||
onError(fetchError) |
|||
} |
|||
|
|||
// 设置默认值
|
|||
if (defaultValue) { |
|||
data.value = typeof defaultValue === 'function' ? defaultValue() : defaultValue |
|||
} |
|||
} finally { |
|||
pending.value = false |
|||
} |
|||
} |
|||
|
|||
// 刷新数据
|
|||
const refresh = async (): Promise<void> => { |
|||
// 清除缓存
|
|||
const cache = getCache() |
|||
cache.delete(cacheKey) |
|||
await execute() |
|||
} |
|||
|
|||
// 服务端预取
|
|||
if (server && typeof window === 'undefined') { |
|||
onServerPrefetch(async () => { |
|||
// 检查是否已有缓存数据
|
|||
const cachedData = getCachedData() |
|||
if (cachedData !== undefined) { |
|||
data.value = cachedData |
|||
return |
|||
} |
|||
|
|||
// 执行预取
|
|||
await execute() |
|||
}) |
|||
} |
|||
|
|||
// 立即检查缓存数据（服务端和客户端都需要）
|
|||
const cachedData = getCachedData() |
|||
if (cachedData !== undefined) { |
|||
data.value = cachedData |
|||
console.log(`[useFetch] 从缓存加载数据: ${cacheKey}`, cachedData) |
|||
} else { |
|||
console.log(`[useFetch] 缓存中无数据: ${cacheKey}`) |
|||
} |
|||
|
|||
// 客户端水合
|
|||
if (typeof window !== 'undefined') { |
|||
onMounted(async () => { |
|||
// 如果已经有缓存数据，不需要再次请求
|
|||
if (cachedData !== undefined) { |
|||
return |
|||
} |
|||
|
|||
// 如果没有预取数据，则执行请求
|
|||
await execute() |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
data: data as Ref<T | null>, |
|||
error: error as Ref<Error | null>, |
|||
pending: pending as Ref<boolean>, |
|||
refresh, |
|||
execute |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 创建 SSR 上下文的辅助函数 |
|||
* 在服务端渲染时调用 |
|||
*/ |
|||
// 删除 createSSRContext，这个职责移动到 ssrContext.ts
|
|||
|
|||
/** |
|||
* 将 SSR 上下文注入到 window 对象 |
|||
* 在客户端水合时调用 |
|||
*/ |
|||
export function hydrateSSRContext(context: SSRContext): void { |
|||
if (typeof window !== 'undefined') { |
|||
// 确保 Map 对象正确重建
|
|||
if (context.cache && Array.isArray(context.cache)) { |
|||
context.cache = new Map(context.cache) |
|||
} |
|||
(window as any).__SSR_CONTEXT__ = context |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 清除 SSR 上下文 |
|||
* 在客户端水合完成后调用 |
|||
*/ |
|||
export function clearSSRContext(): void { |
|||
if (typeof window !== 'undefined') { |
|||
delete (window as any).__SSR_CONTEXT__ |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
import './style.css' |
|||
import { createApp } from "./main" |
|||
import { hydrateSSRContext, clearSSRContext } from './compose/ssrContext' |
|||
|
|||
// 水合 SSR 上下文（如果存在）
|
|||
let ssrContext = null |
|||
if (typeof window !== 'undefined' && (window as any).__SSR_CONTEXT__) { |
|||
ssrContext = (window as any).__SSR_CONTEXT__ |
|||
console.log('[Client] 水合 SSR 上下文:', ssrContext) |
|||
hydrateSSRContext(ssrContext) |
|||
} else { |
|||
console.log('[Client] 未找到 SSR 上下文') |
|||
} |
|||
|
|||
// 使用相同的 SSR 上下文创建应用
|
|||
const { app } = createApp(ssrContext) |
|||
|
|||
app.mount('#app') |
|||
|
|||
// 水合完成后清除 SSR 上下文
|
|||
clearSSRContext() |
|||
@ -0,0 +1,38 @@ |
|||
import { renderToString } from 'vue/server-renderer' |
|||
import { createApp } from './main' |
|||
import { createSSRContext } from './compose/ssrContext' |
|||
|
|||
export async function render(_url: string, init?: { cookies?: Record<string, string> }) { |
|||
// 创建 SSR 上下文，包含数据缓存与 cookies
|
|||
const ssrContext = createSSRContext() |
|||
if (init?.cookies) { |
|||
ssrContext.cookies = { ...init.cookies } |
|||
} |
|||
|
|||
// 将 SSR 上下文传递给应用创建函数
|
|||
const { app } = createApp(ssrContext) |
|||
|
|||
// passing SSR context object which will be available via useSSRContext()
|
|||
// @vitejs/plugin-vue injects code into a component's setup() that registers
|
|||
// itself on ctx.modules. After the render, ctx.modules would contain all the
|
|||
// components that have been instantiated during this render call.
|
|||
const ctx = { cache: ssrContext.cache } |
|||
const html = await renderToString(app, ctx) |
|||
|
|||
// 将 SSR 上下文数据序列化到 HTML 中
|
|||
// 使用更安全的方式序列化 Map
|
|||
const cacheEntries = ssrContext.cache ? Array.from(ssrContext.cache.entries()) : [] |
|||
const ssrData = JSON.stringify(cacheEntries) |
|||
const cookieInit = JSON.stringify(ssrContext.cookies || {}) |
|||
console.log('[SSR] 序列化缓存数据:', cacheEntries) |
|||
const head = ` |
|||
<script> |
|||
window.__SSR_CONTEXT__ = { |
|||
cache: new Map(${ssrData}), |
|||
cookies: ${cookieInit} |
|||
}; |
|||
</script> |
|||
` |
|||
|
|||
return { html, head, setCookies: ssrContext.setCookies || [] } |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
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(ssrContext?: any) { |
|||
const app = createSSRApp(App) |
|||
|
|||
// 如果有 SSR 上下文，注入到应用中
|
|||
if (ssrContext) { |
|||
app.config.globalProperties.$ssrContext = ssrContext |
|||
} |
|||
|
|||
return { app } |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
:root { |
|||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.1; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
/// <reference types="vite/client" />
|
|||
|
|||
declare module '*.vue' { |
|||
import type { DefineComponent } from 'vue' |
|||
const component: DefineComponent<{}, {}, any> |
|||
export default component |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "es2022", |
|||
"useDefineForClassFields": true, |
|||
"lib": ["ES2022", "DOM", "DOM.Iterable"], |
|||
"module": "esnext", |
|||
"skipLibCheck": true, |
|||
|
|||
/* Bundler mode */ |
|||
"moduleResolution": "bundler", |
|||
"allowImportingTsExtensions": true, |
|||
"isolatedModules": true, |
|||
"moduleDetection": "force", |
|||
"noEmit": true, |
|||
"jsx": "preserve", |
|||
|
|||
/* Linting */ |
|||
"strict": true, |
|||
"noUnusedLocals": true, |
|||
"noUnusedParameters": true, |
|||
"noFallthroughCasesInSwitch": true, |
|||
"noUncheckedSideEffectImports": true |
|||
}, |
|||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], |
|||
"references": [{ "path": "./tsconfig.node.json" }] |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"composite": true, |
|||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
|||
"target": "es2023", |
|||
"lib": [ |
|||
"ES2023" |
|||
], |
|||
"module": "esnext", |
|||
"skipLibCheck": true, |
|||
/* Bundler mode */ |
|||
"moduleResolution": "bundler", |
|||
"allowImportingTsExtensions": true, |
|||
"isolatedModules": true, |
|||
"emitDeclarationOnly": true, |
|||
"moduleDetection": "force", |
|||
/* Linting */ |
|||
"strict": true, |
|||
"noUnusedLocals": true, |
|||
"noUnusedParameters": true, |
|||
"noFallthroughCasesInSwitch": true, |
|||
"noUncheckedSideEffectImports": true |
|||
}, |
|||
"include": [ |
|||
"vite.config.ts" |
|||
] |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import { defineConfig } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
base: './', |
|||
plugins: [vue()], |
|||
}) |
|||
Loading…
Reference in new issue