Vue SSR:resolveComponent只能在render()或setup()中使用

vvppvyoh  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(311)

当我试图在SSR Vue应用程序的组件渲染函数中解析全局组件时,我遇到了困难。
我收到错误消息“[Vue warn]:resolveComponent只能在render()或setup()中使用。”当我在render函数中调用resolveComponent时(结果函数只返回输入字符串)。但是setup函数中的调用按预期工作。
这是我尝试过的最小的例子。真实的的代码要复杂得多,当然,Main.vue中的全局组件是未知的。
目标平台不支持动态导入,因此它不是一个替代方案。
不确定是我搞错了还是警告信息误导了你。

条目服务器.ts

import { createSSRApp } from "vue";
import { renderToString } from 'vue/server-renderer'
import Example from '@/components/Example.vue'
import Main from '@/components/Main.vue'

const app = createSSRApp(Main)
app.component("Example", Example)

;(async function() {
  const appHtml = await renderToString(app)

  setResult(appHtml) // Platform specific
})()

字符串

主视图

<script lang="ts">
import { defineComponent, resolveComponent, h } from "vue";
import type {VNode} from 'vue'

export default defineComponent({
  name: "Main",

  setup() {
    return {
      component: resolveComponent("Example")
    }
  },

  render(): VNode {
    console.log('setup', this.component)
    console.log('render', resolveComponent("Example"))

    return h(this.component)
  }
})
</script>

示例.vue

<script lang="ts">
import {createTextVNode, defineComponent} from "vue"
import type {VNode} from "vue"

export default defineComponent({
  name: 'Example',

  render(): VNode {
    return createTextVNode("xxx")
  }
})
</script>

brccelvz

brccelvz1#

我很确定不会有两个vue示例。但我有。
目标平台是一个隔离的虚拟机环境。经过大量的调试,我发现,在如何解析模块导入方面存在一个错误。第二个导入没有传递相同的模块示例。这导致所描述的错误。

相关问题