javascript - Nuxt.js动态组件错误 "Either pre-compile the templates into render functions, or use the compiler-included build"

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 build that includes the compiler :

// nuxt.config.js
export default {
  build: {
    extend(config) {
      config.resolve.alias.vue = 'vue/dist/vue.common'
    }
  },
}