async getText() {
      const decoder = new TextDecoder("utf-8")
      try {
        const test = "1"
        const stream = await getAiText(test) // 獲取流
        const reader = stream.getReader() // 獲取流的讀取器

        // 讀取流數(shù)據(jù)的函數(shù)
        const read = async () => {
          const { done, value } = await reader.read() // 讀取下一個數(shù)據(jù)塊
          if (done) {
            console.log("Stream complete")
            return
          }
          const chunk = decoder.decode(value, { stream: true })
          console.log(chunk)//查看數(shù)據(jù)輸出
          setTimeout(() => {
            this.text += chunk // 更新 text
          }, 200)
          read() // 繼續(xù)讀取下一個數(shù)據(jù)塊
        }

        read() // 開始讀取流數(shù)據(jù)
      } catch (error) {
        console.error("Error fetching AI text:", error)
      }
    },

//我這里做了個跨域，vite.config.js
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),

    ],
    server: {
        host: "0.0.0.0",
        proxy: {
            '/stream3': {
                target: 'xxxxxxxxxxx', // 目標服務器地址
                changeOrigin: true, // 允許跨域
                rewrite: (path) => path.replace(/^\/api/, '') // 去掉請求路徑中的/api前綴
            },
        }
    },
})

//封裝導出請求方法
export const getAiText = async (text) => {
    const response = await fetch('/stream3', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ test: text }),
    })
    return response.body // 返回 ReadableStream
}

//組件頁面引入
<template>
  <div class='HelloWorld_wrap'>
    <h1 @click="getText()">點擊</h1>
    {{text}}
  </div>
</template>
<script >
import { getAiText } from "../http/testAi"
import {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  toRefs,
  reactive,
} from "vue"
export default defineComponent({
  name: "HelloWorld",
  props: {},
  data() {
    return {
      text: "",
    }
  },
  methods: {
    async getText() {
      const decoder = new TextDecoder("utf-8")
      try {
        const test = "1"
        const stream = await getAiText(test) // 獲取流
        const reader = stream.getReader() // 獲取流的讀取器

        // 讀取流數(shù)據(jù)的函數(shù)
        const read = async () => {
          const { done, value } = await reader.read() // 讀取下一個數(shù)據(jù)塊
          if (done) {
            console.log("Stream complete")
            return
          }
          const chunk = decoder.decode(value, { stream: true })
          console.log(chunk)//查看數(shù)據(jù)輸出
          setTimeout(() => {
            this.text += chunk // 更新 text
          }, 200)
          read() // 繼續(xù)讀取下一個數(shù)據(jù)塊
        }

        read() // 開始讀取流數(shù)據(jù)
      } catch (error) {
        console.error("Error fetching AI text:", error)
      }
    },
  },
  mounted() { },
});
</script>
<style lang="scss" scoped>
</style>

//最后app.vue引入
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>