使用 Nuxt 动态获取和编译模板

Question

我想从远程获取一个 svg 并通过编译它来实现它。 '带来生命'我的意思是按类选择其中的一些元素并动态地将组件列表附加到其中。

现在我只使用<div v-html="svg"/>，我的组件看起来像这样：

data() {
  return {
    svg: '',
  }
},
async created() {
  let res = await axios.get(mySvgSrc)
  this.svg = res.data
}

但这并不允许我通过插入带有 vue 绑定的元素来实现它。

因此，我想使用像 <component :is="compName"></component> 这样的动态组件，所以在获取我的 svg 后，将结果用作模板。示例js fiddle here。

data() {
  return {
    compName: 'someDefaultComponent',
  }
},
async created() {
  let res = await axios.get(mySvgSrc)
  Vue.component('svgComponent', { template: res.data })
  this.compName = 'svgComponent' 
}

但是，nuxt 一直抱怨它无法编译它：

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

我该怎么办？

1) 以某种方式将 svg（字符串）模板在获取后转换为渲染函数？

2) 使用包含编译器的构建？ （而不是，但如果是这样：它是如何工作的？）

我觉得我需要选项 2) 才能执行选项 1)。

编辑

刚刚找到v-runtime-template，但不确定它是否是 vue 的必经之路......

Answer 1

您需要更改 Vue 构建。 添加这个字符串：

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

到 nuxt.config.js 这里：

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