如何结合 vue、i18n 和 markdown 页面？

Question

我正在尝试使用 Markdown 页面作为 vue 中的翻译。

这是我让它工作的尝试：

Home.vue

<template>
  <div v-html="$t('page')">
  </div>
</template>

<script>
import Page from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    Page
  }
}
</script>

<i18n>
{
  "en": {
    "page": "<h1>Welcome to my homepage!</h1><br>Doesn't this look awesome?"
  },
  "fr": {
    "page": "Non? <Page />"
  }
}
</i18n>

BonjourLeMonde.md

# Bonjour tout le monde!

Bienvenue pour mon site de web.

不幸的是，虽然可以读取 html 标签，但没有加载导入。

有人知道解决办法吗？

Link to example code.

Answer 1

使用 VueSimpleInlineTranslation 解决。

Home.md

<template>
  <div>
    <translate :current-language="$i18n.locale" language="en"><PageEN /></translate>
    <translate :current-language="$i18n.locale" language="fr"><PageFR /></translate>
  </div>
</template>

<script>
import { VueSimpleInlineTranslation } from '@alidrus/vue-simple-inline-translation'
import PageEN from '@/components/HelloWorld.md'
import PageFR from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    translate: VueSimpleInlineTranslation,
    PageEN,
    PageFR
  }
}
</script>

Answer 2

您不能将v-html 与 Vue 组件一起使用。来自文档v-html：

请注意，内容是以纯 HTML 形式插入的——它们不会被编译为 Vue 模板。如果您发现自己尝试使用 v-html 编写模板，请尝试改用组件来重新考虑解决方案。

但是您仍然可以通过使用dynamic component 和compile 函数来实现此目的。

Render.vue

<template>
  <component :is="result"/>
</template>

<script>
  import Vue from 'vue'

  export default {
    props: {
      html: String
    },

    computed: {
      result () {
        return Vue.compile(this.html)
      }
    }
  }
</script>

那就用它代替v-html：

<Render :html="$t('page')"/>

将您的组件注册为全局组件（如果您想在本地注册，您可以将您的组件传递给 Render 并使用 compile 函数的结果进行注册）：

Vue.component('Post', Post)

注意：Vue.compile 仅在完整版本中可用，您必须在 vue.config.js 中添加 runtimeCompiler: true。