Question

我正在尝试将降价页面用作vue中的翻译。

这是我尝试使其运行的尝试：

package.json

"dependencies": {
    ...
    "vue": "~2.6.10",
    "vue-i18n": "~8.0.0"
    ...
  "devDependencies": {
    ...
    "vue-markdown-loader": "~2.4.1",
    ...

Homepage.vue

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

<script>
import Page from '@/composants/fr/01.accueil/Accueil.md'

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

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

Accueil.md

# Bonjour tout le monde

Ça a l'air super, n'est-ce pas ?
It can load html tags, but it doesn’t load scripts I guess.

不幸的是，虽然可以读取html标记，但未加载导入。

有人对此有解决方案吗？

Answer 1

您不能将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中，并使用编译功能的结果进行注册）：

Vue.component('Post', Post)

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

Answer 2

通过使用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>

如何合并vue，i18n和markdown页面？

2 个答案: