在 nuxt 布局中使用动态组件获取运行时编译错误答案

【问题标题】：use dynamic component in the nuxt layout get runtime compile error在 nuxt 布局中使用动态组件获取运行时编译错误
【发布时间】：2020-08-22 22:52:02
【问题描述】：

在我的 nuxt 应用程序中。在布局文件中使用动态组件在不同页面中设置组件，如下所示

<template>
  <div id="app">
    <div id="app-body">
      <div id="app-topbar">
         <component v-bind:is="actionBar.component"></component>
      </div>

      <div id="app-content">
        <nuxt />
      </div>
    </div>
  </div>
</template>

但是当我运行应用程序时，我得到了下面的错误

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.

我会尝试将我的component 包装在no-ssr 标签中，但错误仍然存在

【问题讨论】：

为什么不按照错误消息中的建议使用包含编译器的 Vue 构建？
你能给我一个关于它的文档链接吗？
好的，这里是official docs。
我以前读过这个，但我需要在 nuxt 中配置它。你能在nuxt上提供任何链接来配置它吗

标签： vue.js nuxt.js

【解决方案1】：

正如 DigitalDrifter 所说，您需要使用包含编译器的构建。

要在 nuxt 中执行此操作，请尝试将以下内容添加到您的 nuxt.config.js：

build: {
  extend(config, ctx) {
    config.resolve.alias['vue'] = 'vue/dist/vue.common'

【讨论】：