当我试图在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>
型
1条答案
按热度按时间brccelvz1#
我很确定不会有两个vue示例。但我有。
目标平台是一个隔离的虚拟机环境。经过大量的调试,我发现,在如何解析模块导入方面存在一个错误。第二个导入没有传递相同的模块示例。这导致所描述的错误。