Vue服务端渲染

若梦plus2025-07-30 0:02

相关资料

相关问题

说说 Vue 3服务端渲染（SSR）的原理，以及它与客户端渲染（CSR）的区别？

Vue 3 服务端渲染（SSR）是指在服务器端将 Vue 组件渲染为 HTML字符串，并将其发送给客户端。这与客户端渲染（CSR）不同，后者是在浏览器中执行 JavaScript 来生成 HTML。

在 SSR 中，客户端第一次访问页面时，服务器会根据请求路径渲染对应的 HTML 页面，这有利于提升首屏加载速度和 SEO 性能。之后，客户端还需要进行"激活"，通过 Vue的hydrate 方法让已经渲染好的HTML 具备动态交互能力。而 CSR 则是先加载静态 HTML 框架，之后由客户端完成所有页面的 JavaScript 渲染。

两者的主要区别在于：

  • SEO：SSR 在服务器端生成完整的HTML，利于搜索引擎爬取，而CSR生成的 HTML 需要等到 JavaScript 执行完毕后才可用。

  • 性能：SSR 的首屏渲染速度更快，但会增加服务器负载；CSR依赖浏览器的计算能力，但可以降低服务器的压力。

  • 安全

Vue SSR 中如何解决首屏数据获取问题？

在 Vue SSR 中，首屏数据的获取需要提前在服务器端完成。常用的解决方案是在组件中定义一个 asyncData 方法，专门用于数据预取。这个方法在组件渲染之前调用，服务器端会在渲染 HTML之前获取数据并将其注入到组件的props中。

具体步骤为：

  • 在服务器端，在SSR渲染函数中，先调用组件的 asyncData 方法获取数据，再将数据注入到Vue 组件的 props.

  • 在客户端，Vue 会利用 hydrate 方法进行激活，接管服务器端生成的 HTML。客户端还会将服务器预取的数据作为初始状态传递，避免重复请求。

数据预取的关键在于服务端需要等待数据加载完毕再渲染页面，以保证返回给客户端的 HTML包含实际的数据。

如何在 Vue SSR 项目中处理路由和状态同步问题？

在 Vue SSR 中，路由和状态的同步非常重要。为了确保服务器和客户端渲染结果一致，必须在服务器端渲染时同步路由和状态。常用的做法包括：

  • 路由同步：在服务端渲染时，服务器会根据用户的请求URL 手动调用 router.push（）将路由切换到正确的页面，然后等待 router.isReady（）确保所有异步路由组件加载完毕后，再进行服务器端渲染。客户端同样会根据当前 URL 初始化路由。
  • 状态同步：在 SSR场景中，服务器端渲染后的状态（如 Pinia 的 store 状态）需要传递到客户端。这通常是通过将状态序列化并嵌入到 HTML 中，客户端在激活时会使用这些初始状态，避免再次请求数据。

基础概念

服务端渲染概念

什么是服务端渲染（SSR）

服务端渲染（Server-Side Rendering，简称 SSR）是指在服务器端将网页内容渲染为完整的 HTML，然后将其发送到客户端浏览器进行显示。与之相对的是客户端渲染 （Client-Side Rendering，简称 CSR），即在浏览器端通过 Javascript 动态生成页面内容。

SSR 与 CSR的区别

  • 渲染时机

    • SSR：页面在服务器端生成，浏览器接收到完整的 HTML 内容。
    • CSR：浏览器先接收到一个空的 HTML 壳，然后通过 JavaScript 动态填充内容。

  • 首屏加载速度

    • SSR：由于页面内容已经生成，首屏渲染速度较快。
    • CSR：需要下载并执行 JavaScript，首屏渲染速度较慢。

  • SEO 友好性

    • SSR：搜索引擎可以直接抓取完整的页面内容，有利于 SEO。
    • CSR：搜索引擎可能无法执行 JavaScript，导致页面内容无法被抓取。

SSR的优势和挑战

优势：

  • 提高首屏渲染速度：用户可以更快地看到页面内容，提升用户体验。

  • SEO 优化：有助于搜索引擎抓取和索引页面，提高网站排名。

  • 共享链接时显示预览：在社交媒体上分享链接时，能够正确显示页面预览信息。

挑战：

  • 开发复杂度增加：需要处理服务器端渲染逻辑，涉及到 Node.js 等后端技术。

  • 服务器压力增大：服务器需要承担渲染页面的工作，可能导致性能瓶颈。

  • 状态管理复杂：需要在服务器和客户端之间同步状态，防止数据不一致。

Vue SSR 基础概念

Vue 的渲染机制

在传统的 Vue 应用中，渲染过程如下：

  • 初始化：在浏览器中加载 HTML 文件，包含一个根元素和引入的 JavaScript 文件。

  • 解析：浏览器下载并执行 JavaScript 文件，创建 Vue 实例。

  • 渲染：Vue 根据模板和数据，生成虚拟 DOM，并将其渲染为真实的 DOM。

Vue SPA 初始化与问题剖析

  • 首屏渲染速度：大型应用在客户端渲染可能导致白屏时间过长，影响用户体验。

  • SEO：搜索引擎可能无法执行 JavaScript，导致页面内容无法被索引。

  • 社交媒体预览：一些平台在抓取页面预览时无法执行 JavaScript，需要服务端提供完整的HTML。

Vue SSR 的核心原理

Vue SSR（Server-Side Rendering）的核心是使用服务端的渲染器，将 Vue 组件渲染为 HTML字符串，然后发送给客户端。客户端接收到 HTML后，再通过 Vue.js 将其转换为可交互的应用（即客户端激活）。

渲染原理详解

1. 传统SPA渲染流程对比

传统SPA（客户端渲染）流程：
graph TD A[用户访问] --> B[下载HTML骨架] B --> C[下载JavaScript Bundle] C --> D[执行Vue应用] D --> E[创建虚拟DOM] E --> F[渲染真实DOM] F --> G[发送API请求] G --> H[更新页面内容]
SSR渲染流程：
graph TD A[用户访问] --> B[服务器接收请求] B --> C[执行Vue应用] C --> D[创建虚拟DOM] D --> E[调用renderToString] E --> F[生成完整HTML] F --> G[发送HTML到客户端] G --> H[客户端激活hydrate] H --> I[接管交互]

2. Vue SSR 核心机制

双端渲染架构

Vue SSR 采用同构（Isomorphic）架构，同一套代码可以在服务端和客户端运行：

javascript 复制代码 
// 核心架构原理
const isServer = typeof window === 'undefined'

// 服务端：renderToString
if (isServer) {
  const html = await renderToString(app)
  // 输出: <div>Hello World</div>
}

// 客户端：hydrate
else {
  app.mount('#app') // 激活服务端渲染的HTML
}
虚拟DOM到HTML的转换过程
javascript 复制代码 
// Vue组件的渲染过程
const MyComponent = {
  template: '<div>{{ message }}</div>',
  data() {
    return { message: 'Hello SSR' }
  }
}

// 1. 服务端执行组件
// 2. 生成虚拟DOM节点
const vnode = {
  type: 'div',
  children: 'Hello SSR',
  props: {}
}

// 3. renderToString 将vnode转为HTML字符串
// 输出: '<div>Hello SSR</div>'

3. 渲染器工作原理

服务端渲染器（Server Renderer）
javascript 复制代码 
// vue/server-renderer 内部原理简化版
export function renderToString(app, context = {}) {
  return new Promise((resolve, reject) => {
    // 1. 创建渲染器实例
    const renderer = createRenderer()
    
    // 2. 执行应用实例
    const instance = app._component
    
    // 3. 调用组件的渲染函数
    const vnode = instance.render()
    
    // 4. 遍历虚拟DOM树，转换为HTML字符串
    const html = renderVNodeToString(vnode, context)
    
    resolve(html)
  })
}

function renderVNodeToString(vnode, context) {
  if (typeof vnode === 'string') {
    return escapeHtml(vnode)
  }
  
  if (Array.isArray(vnode)) {
    return vnode.map(child => renderVNodeToString(child, context)).join('')
  }
  
  const { type, props, children } = vnode
  
  // 渲染开始标签
  let html = `<${type}`
  
  // 渲染属性
  for (const key in props) {
    html += ` ${key}="${escapeHtml(props[key])}"`
  }
  html += '>'
  
  // 递归渲染子节点
  if (children) {
    html += renderVNodeToString(children, context)
  }
  
  // 渲染结束标签
  html += `</${type}>`
  
  return html
}
客户端激活器（Hydration）
javascript 复制代码 
// 客户端激活原理
export function hydrate(vnode, container) {
  // 1. 获取服务端渲染的DOM节点
  const existingDom = container.firstChild
  
  // 2. 创建Vue组件实例
  const instance = createComponentInstance(vnode)
  
  // 3. 将虚拟DOM与现有DOM进行匹配
  hydrateNode(existingDom, vnode, instance)
  
  // 4. 绑定事件监听器
  attachEventListeners(instance)
  
  // 5. 激活响应式系统
  activateReactivity(instance)
}

function hydrateNode(node, vnode, instance) {
  // 检查节点类型是否匹配
  if (node.tagName.toLowerCase() !== vnode.type) {
    console.warn('SSR hydration mismatch')
  }
  
  // 绑定组件实例到DOM节点
  node._vnode = vnode
  vnode.el = node
  
  // 递归激活子节点
  hydrateChildren(node, vnode.children, instance)
}

4. 状态序列化与注水机制

服务端状态序列化
javascript 复制代码 
// 服务端：将状态嵌入HTML
export async function render(url) {
  const { app, router, store } = createApp()
  
  // 路由和数据预取
  await router.push(url)
  await prefetchData(store, router.currentRoute.value)
  
  // 渲染HTML
  const html = await renderToString(app)
  
  // 序列化状态
  const state = store.state
  const serializedState = JSON.stringify(state)
  
  return `
    <!DOCTYPE html>
    <html>
      <body>
        <div id="app">${html}</div>
        <script>
          // 将状态注入到全局变量
          window.__INITIAL_STATE__ = ${serializedState}
        </script>
      </body>
    </html>
  `
}
客户端状态注水
javascript 复制代码 
// 客户端：恢复服务端状态
export function createApp() {
  const store = createStore({
    state: {
      // 从全局变量恢复状态
      ...window.__INITIAL_STATE__
    }
  })
  
  // 清理全局变量
  delete window.__INITIAL_STATE__
  
  return { app, store }
}

5. 组件渲染生命周期

服务端组件生命周期
javascript 复制代码 
// 服务端只执行部分生命周期
export default {
  name: 'MyComponent',
  
  // ✅ 服务端执行
  beforeCreate() {
    console.log('1. beforeCreate - 服务端执行')
  },
  
  // ✅ 服务端执行  
  created() {
    console.log('2. created - 服务端执行')
    // 可以进行数据初始化
  },
  
  // ❌ 服务端跳过
  beforeMount() {
    console.log('3. beforeMount - 仅客户端执行')
  },
  
  // ❌ 服务端跳过
  mounted() {
    console.log('4. mounted - 仅客户端执行')
  },
  
  render() {
    // ✅ 服务端执行渲染函数
    return h('div', this.message)
  }
}
客户端激活生命周期
graph TD A[服务端HTML到达] --> B[开始客户端激活] B --> C[beforeMount] C --> D[hydrate过程] D --> E[DOM事件绑定] E --> F[响应式系统激活] F --> G[mounted] G --> H[完全激活状态]

6. 关键技术细节

渲染上下文（Render Context）
javascript 复制代码 
// 渲染上下文管理关键信息
class RenderContext {
  constructor() {
    this.modules = new Set() // 记录使用的模块
    this.styles = []         // 收集CSS样式
    this.preloadLinks = []   // 资源预加载链接
    this.state = {}          // 应用状态
  }
  
  // 收集组件使用的CSS模块
  collectStyle(style) {
    this.styles.push(style)
  }
  
  // 收集需要预加载的资源
  collectPreloadLink(link) {
    this.preloadLinks.push(link)
  }
}
组件缓存机制
javascript 复制代码 
// 组件级缓存提升性能
export function createComponentCache() {
  const cache = new Map()
  
  return {
    get(key) {
      return cache.get(key)
    },
    
    set(key, component, ttl = 1000 * 60 * 15) {
      cache.set(key, {
        component,
        expires: Date.now() + ttl
      })
    },
    
    // 渲染时检查缓存
    render(key, renderFn) {
      const cached = this.get(key)
      
      if (cached && cached.expires > Date.now()) {
        return cached.component
      }
      
      const result = renderFn()
      this.set(key, result)
      return result
    }
  }
}

7. 错误边界和降级策略

javascript 复制代码 
// SSR错误处理机制
export async function renderWithFallback(app, context) {
  try {
    // 尝试SSR渲染
    const html = await renderToString(app, context)
    return { html, error: null }
    
  } catch (error) {
    console.error('SSR rendering failed:', error)
    
    // 降级到客户端渲染
    return {
      html: `
        <div id="app">
          <div class="ssr-fallback">Loading...</div>
        </div>
        <script>
          // 标记SSR失败，使用CSR模式
          window.__SSR_ERROR__ = true
        </script>
      `,
      error: error.message
    }
  }
}

## SSR 渲染流程

Vue SSR 的渲染过程可以分为以下几个关键步骤：

```mermaid
graph TD
    A[客户端请求] --> B[服务器接收请求]
    B --> C[路由匹配]
    C --> D[数据预取]
    D --> E[服务端渲染组件]
    E --> F[生成完整HTML]
    F --> G[发送至客户端]
    G --> H[客户端激活]
    H --> I[交互式应用]

服务端渲染器创建

javascript 复制代码 
// server.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createApp } from './main.js'

export async function render(url, manifest) {
  const { app, router, store } = createApp()
  
  // 设置服务器端路由
  await router.push(url)
  await router.isReady()
  
  // 渲染应用为字符串
  const html = await renderToString(app)
  const preloadLinks = renderPreloadLinks(manifest)
  
  return {
    html,
    preloadLinks
  }
}

客户端激活代码

javascript 复制代码 
// client.js
import { createSSRApp } from 'vue'
import { createApp } from './main.js'

const { app, router } = createApp()

// 等待路由准备完毕后激活应用
router.isReady().then(() => {
  app.mount('#app')
})

通用应用入口

javascript 复制代码 
// main.js
import { createSSRApp } from 'vue'
import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router'
import { createPinia } from 'pinia'
import App from './App.vue'
import { routes } from './router'

export function createApp() {
  const app = createSSRApp(App)
  
  // 创建路由实例
  const router = createRouter({
    history: import.meta.env.SSR 
      ? createMemoryHistory() 
      : createWebHistory(),
    routes
  })
  
  // 创建状态管理
  const pinia = createPinia()
  
  app.use(router)
  app.use(pinia)
  
  return { app, router, pinia }
}

同构渲染的关键点

1. 环境差异处理

javascript 复制代码 
// utils/env.js
export const isClient = typeof window !== 'undefined'
export const isServer = !isClient

// 条件性执行代码
if (isClient) {
  // 仅在客户端执行
  window.addEventListener('resize', handleResize)
}

if (isServer) {
  // 仅在服务端执行
  console.log('Server-side rendering')
}

2. 组件生命周期适配

javascript 复制代码 
// MyComponent.vue
<template>
  <div>{{ data }}</div>
</template>

<script>
import { ref, onMounted, onServerPrefetch } from 'vue'

export default {
  setup() {
    const data = ref(null)
    
    const fetchData = async () => {
      // 数据获取逻辑
      const response = await fetch('/api/data')
      data.value = await response.json()
    }
    
    // 服务端预取数据
    onServerPrefetch(async () => {
      await fetchData()
    })
    
    // 客户端挂载时检查是否需要获取数据
    onMounted(() => {
      if (!data.value) {
        fetchData()
      }
    })
    
    return { data }
  }
}
</script>

Vue SSR 生命周期

服务端生命周期

在服务端渲染过程中，只有部分生命周期钩子会被调用：

graph LR A[beforeCreate] --> B[created] --> C[onServerPrefetch] --> D[renderToString]

关键生命周期钩子

javascript 复制代码 
// 组件中的生命周期处理
export default {
  // ✅ 服务端会执行
  beforeCreate() {
    console.log('beforeCreate - 服务端和客户端都执行')
  },
  
  // ✅ 服务端会执行
  created() {
    console.log('created - 服务端和客户端都执行')
  },
  
  // ❌ 服务端不会执行
  beforeMount() {
    console.log('beforeMount - 仅客户端执行')
  },
  
  // ❌ 服务端不会执行
  mounted() {
    console.log('mounted - 仅客户端执行')
  },
  
  setup() {
    // ✅ 服务端会执行
    console.log('setup - 服务端和客户端都执行')
    
    // ✅ 服务端专用钩子
    onServerPrefetch(async () => {
      console.log('onServerPrefetch - 仅服务端执行')
      // 数据预取逻辑
    })
    
    // ❌ 服务端不会执行
    onMounted(() => {
      console.log('onMounted - 仅客户端执行')
    })
  }
}

数据获取策略

1. 服务端数据预取

javascript 复制代码 
// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    loading: false
  }),
  
  actions: {
    async fetchUser(id) {
      this.loading = true
      try {
        const response = await fetch(`/api/users/${id}`)
        this.user = await response.json()
      } finally {
        this.loading = false
      }
    }
  }
})

// UserProfile.vue
<template>
  <div v-if="userStore.loading">Loading...</div>
  <div v-else-if="userStore.user">
    <h1>{{ userStore.user.name }}</h1>
    <p>{{ userStore.user.email }}</p>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'
import { onServerPrefetch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const userStore = useUserStore()
    const route = useRoute()
    
    // 服务端数据预取
    onServerPrefetch(async () => {
      await userStore.fetchUser(route.params.id)
    })
    
    return { userStore }
  }
}
</script>

2. 状态序列化与注水

javascript 复制代码 
// server.js - 状态序列化
export async function render(url) {
  const { app, router, pinia } = createApp()
  
  await router.push(url)
  await router.isReady()
  
  // 渲染应用
  const html = await renderToString(app)
  
  // 序列化状态
  const state = pinia.state.value
  
  return {
    html,
    state: JSON.stringify(state)
  }
}

// HTML 模板
const template = `
<!DOCTYPE html>
<html>
<head>
  <title>Vue SSR App</title>
</head>
<body>
  <div id="app">${html}</div>
  <script>
    // 将状态注入到客户端
    window.__PINIA_STATE__ = ${state}
  </script>
</body>
</html>
`
javascript 复制代码 
// client.js - 状态注水
import { createApp } from './main.js'

const { app, router, pinia } = createApp()

// 注水服务端状态
if (window.__PINIA_STATE__) {
  pinia.state.value = window.__PINIA_STATE__
}

router.isReady().then(() => {
  app.mount('#app')
})

路由处理

异步路由组件

javascript 复制代码 
// router/index.js
import { createRouter } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/user/:id',
    component: () => import('@/views/UserProfile.vue'),
    // 路由级别的数据预取
    beforeEnter: async (to, from, next) => {
      if (import.meta.env.SSR) {
        // 服务端预取逻辑
        await preloadUserData(to.params.id)
      }
      next()
    }
  }
]

export { routes }

路由状态同步

javascript 复制代码 
// 确保服务端和客户端路由状态一致
export async function render(url) {
  const { app, router } = createApp()
  
  // 设置服务端路由
  await router.push(url)
  await router.isReady()
  
  // 确保所有异步组件都已加载
  const matchedComponents = router.currentRoute.value.matched
    .flatMap(record => Object.values(record.components))
  
  await Promise.all(
    matchedComponents.map(component => {
      if (typeof component === 'function') {
        return component()
      }
    })
  )
  
  const html = await renderToString(app)
  return { html }
}

性能优化策略

1. 组件级缓存

javascript 复制代码 
// server.js
import LRU from 'lru-cache'

const componentCache = new LRU({
  max: 1000,
  ttl: 1000 * 60 * 15 // 15分钟
})

export async function render(url) {
  const cacheKey = `component:${url}`
  
  // 检查缓存
  if (componentCache.has(cacheKey)) {
    return componentCache.get(cacheKey)
  }
  
  const result = await renderApp(url)
  
  // 存入缓存
  componentCache.set(cacheKey, result)
  
  return result
}

2. 流式渲染

javascript 复制代码 
// 使用流式渲染提升感知性能
import { renderToNodeStream } from 'vue/server-renderer'

export function renderStream(app) {
  return renderToNodeStream(app)
}

// Express 中使用
app.get('*', async (req, res) => {
  const { app } = createApp()
  
  res.write(`
    <!DOCTYPE html>
    <html>
    <head><title>Vue SSR</title></head>
    <body><div id="app">
  `)
  
  const stream = renderToNodeStream(app)
  stream.pipe(res, { end: false })
  
  stream.on('end', () => {
    res.end('</div></body></html>')
  })
})

3. 资源预加载

javascript 复制代码 
// 生成资源预加载链接
function renderPreloadLinks(modules, manifest) {
  let links = ''
  
  modules.forEach(id => {
    const files = manifest[id]
    if (files) {
      files.forEach(file => {
        if (file.endsWith('.js')) {
          links += `<link rel="preload" href="${file}" as="script">`
        } else if (file.endsWith('.css')) {
          links += `<link rel="preload" href="${file}" as="style">`
        }
      })
    }
  })
  
  return links
}

最佳实践

1. 错误处理

javascript 复制代码 
// 全局错误处理
export async function render(url) {
  try {
    const { app, router } = createApp()
    await router.push(url)
    
    return {
      html: await renderToString(app),
      error: null
    }
  } catch (error) {
    console.error('SSR Error:', error)
    
    return {
      html: '<div>Something went wrong</div>',
      error: error.message
    }
  }
}

2. 开发环境热更新

javascript 复制代码 
// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    // SSR 插件配置
    {
      name: 'ssr-dev',
      configureServer(server) {
        server.middlewares.use('*', async (req, res, next) => {
          try {
            const url = req.originalUrl
            const { render } = await server.ssrLoadModule('/src/entry-server.js')
            const { html } = await render(url)
            
            res.end(html)
          } catch (error) {
            next(error)
          }
        })
      }
    }
  ]
})

3. 监控和日志

javascript 复制代码 
// 性能监控
export async function render(url) {
  const startTime = Date.now()
  
  try {
    const result = await renderApp(url)
    
    // 记录渲染时间
    const renderTime = Date.now() - startTime
    console.log(`SSR rendered ${url} in ${renderTime}ms`)
    
    return result
  } catch (error) {
    // 错误日志
    logger.error('SSR Error', {
      url,
      error: error.message,
      stack: error.stack
    })
    throw error
  }
}
相关推荐
唐某人丶4 分钟前
前端仔如何在公司搭建 AI Review 系统
前端·人工智能·aigc
RainbowSea4 分钟前
伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Boot 后端 + Vue3 - 02
java·vue.js·spring boot
没有鸡汤吃不下饭4 分钟前
排查vue项目线上才会出现的故障
前端·vue.js·nginx
吃饭睡觉打豆豆嘛6 分钟前
React Router 传参三板斧：新手也能 5 秒做决定
前端
裘乡8 分钟前
storybook配合vite + react生成组件文档
前端·react.js
Carolinemy9 分钟前
ElementUI 之 el-table
前端·vue.js
裘乡12 分钟前
vonage音视频基本使用--web@opentok/client
前端·音视频开发
BugCollect15 分钟前
Lodash常用方法
前端·javascript
RainbowSea21 分钟前
伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Boot 后端 + Vue3 - 01
vue.js·spring boot·后端
工业互联网专业22 分钟前
基于JavaWeb的兼职发布平台的设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·兼职发布平台
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04扣子开源本地部署教程 丨Coze智能体小白喂饭级指南05腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）06KGG转MP3工具|非KGM文件|解密音频07【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器08coze 开源版本地部署及踩过的坑【喂饭级教程】09干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！1001-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验