Nuxt.js 动态组件错误“要么将模板预编译为渲染函数，要么使用编译器包含的构建”

Question

我在 Nuxt.js 中收到以下错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Anonymous>

       <RenderPost> at components/RenderPost.vue

         <Pages/post/Id.vue> at pages/post/_id.vue

           <Nuxt>

             <Layouts/default.vue> at layouts/default.vue

               <Root>

我正在关注这里的示例：https://stackoverflow.com/a/39519105，我的RenderPost.vue大致如下所示：

<template>

    <client-only>

        <component :is="dynamicComponent" />

    </client-only>

</template>

<script>

export default {

    methods:

    {

        linkedView()

        {

            return `<a href="#" @click.prevent="runSomething">Click me</a>`;

        },

    },

    computed :

    {

        dynamicComponent() {

            return {

                data() { return { foo : null }},

                template : `<div>${this.linkedView()}<br>{{ foo }}</div>`,

                methods :

                {

                    runSomething()

                    {

                        this.foo = 'ran something!'

                    }

                }

            }

        }

    }

}

</script>

我添加了<client-only>因为我还收到有关服务器和客户端不匹配的错误。如果没有它，我会收到一个额外的错误：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Answer 1

Nuxt 通常仅包含 Vue 运行时（不包括编译器）作为优化，可将构建大小减少约 10KB，因为大多数用户使用预编译模板（例如，通过单个文件组件）。Vue 仅运行时构建会在运行时使用 in-DOM 或字符串模板时发出您观察到的警告。由于您的应用程序在运行时需要字符串模板，因此您需要配置 Nuxt 以使用包含编译器的 Vue 构建：// nuxt.config.jsexport default {  build: {    extend(config) {      config.resolve.alias.vue = 'vue/dist/vue.common'    }  },}

Answer 2

下面的代码片段展示了如何<component :is="dynamicComponent"></component>工作。2 个组件注册到Vue（全局）单击按钮后，:is绑定将更新为已注册的组件名称之一单击按钮时，组件本身会向父组件发出事件Vue.component('Comp1', {&nbsp; template: `&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; COMPONENT 1<br />&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; @click="() => $emit('clicked', 1)"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Click 1&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; `})Vue.component('Comp2', {&nbsp; template: `&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; COMPONENT 2<br />&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; @click="() => $emit('clicked', 2)"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Click 2&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; `})new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; dynamicComponent: 'Comp1'&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; toggleComponent() {&nbsp; &nbsp; &nbsp; if (this.dynamicComponent === 'Comp1') {&nbsp; &nbsp; &nbsp; &nbsp; this.dynamicComponent = 'Comp2'&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.dynamicComponent = 'Comp1'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; handleClicked(id) {&nbsp; &nbsp; &nbsp; console.log('click in comp', id)&nbsp; &nbsp; }&nbsp; },&nbsp; template: `&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; @click="toggleComponent"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; SWITCH COMPONENT&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; <component&nbsp; &nbsp; &nbsp; &nbsp; :is="dynamicComponent"&nbsp; &nbsp; &nbsp; &nbsp; @clicked="(id) => handleClicked(id)"&nbsp; &nbsp; &nbsp; ></component>&nbsp; &nbsp; </div>&nbsp; `})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app"></div>