时间戳

首页 > 解决方案 > 棱镜图像不会加载到 vue 站点并创建运行时/编译器错误

image - 棱镜图像不会加载到 vue 站点并创建运行时/编译器错误

问题描述

我将 prismic.io 无头 cms 集成到我的 vuetify 项目中，并且能够将我在 prismic 存储库中创建的关键文本字段中的内容渲染到项目中，但我无法加载图像。当我在浏览器中查看页面时，我收到以下控制台错误：

[Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。

在发现

---> 在 /Users/jbdebiasio/dev/prismic-vue/src/components/Image.vue

当我使用检查元素查看图像时，它显示以下标记：

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

这是什么意思，我需要做什么才能正确渲染图像？我尝试更新我的应用程序实例，但没有发现任何变化。

标签： imagevue.jsvuetify.jsprismic.io

解决方案

我的公司最近遇到了同样的问题，这是因为 Prismic Vue 包的构建方式。

这是由于 Prismic 没有使用渲染函数，而是需要模板编译器在运行时构建它们的组件。

您将需要添加 Vue 的完整版本，其中包括模板编译器

如果项目是使用 Vue CLI 创建的，则以下示例有效

// vue.config.js
module.exports = {
  // Will merge all properties with the default web pack config
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
      }
    }
  }  
}

更多信息在这里

Vue CLI 配置在这里

这个解决方案显然只是一个创可贴，真正的问题需要 Prismic 来解决。请参阅此拉取请求。

推荐阅读