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.js

export default {

  build: {

    extend(config) {

      config.resolve.alias.vue = 'vue/dist/vue.common'

    }

  },

}

Answer 2

下面的代码片段展示了如何<component :is="dynamicComponent"></component>工作。

• 2 个组件注册到Vue（全局）

• 单击按钮后，:is绑定将更新为已注册的组件名称之一

• 单击按钮时，组件本身会向父组件发出事件

Vue.component('Comp1', {

  template: `

    <div>

      COMPONENT 1<br />

      <button

        @click="() => $emit('clicked', 1)"

      >

        Click 1

      </button>

    </div>

  `

})

Vue.component('Comp2', {

  template: `

    <div>

      COMPONENT 2<br />

      <button

        @click="() => $emit('clicked', 2)"

      >

        Click 2

      </button>

    </div>

  `

})

new Vue({

  el: "#app",

  data() {

    return {

      dynamicComponent: 'Comp1'

    }

  },

  methods: {

    toggleComponent() {

      if (this.dynamicComponent === 'Comp1') {

        this.dynamicComponent = 'Comp2'

      } else {

        this.dynamicComponent = 'Comp1'

      }

    },

    handleClicked(id) {

      console.log('click in comp', id)

    }

  },

  template: `

    <div>

      <button

        @click="toggleComponent"

      >

        SWITCH COMPONENT

      </button>

      <br />

      <component

        :is="dynamicComponent"

        @clicked="(id) => handleClicked(id)"

      ></component>

    </div>

  `

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>