使用 Vue.js + Jekyll 多语言答案

【问题标题】：Using Vue.js + Jekyll multilingual使用 Vue.js + Jekyll 多语言
【发布时间】：2020-12-01 10:45:13
【问题描述】：

我正在使用Jekyll jekyll-multiple-languages-plugin 我也想使用 Vue.js + Webpack。我无法理解执行此操作的正确方法。

Jekyll 使用 .yml 文件来存储数据，然后像 {% translate title %} 这样的 Liquid 标签来提供每种语言的数据。

我可以在 _site 文件夹中设置 src 文件夹和所有 vue 脚手架，运行bundle exec jekyll serve 然后从 _site 运行 npm run serve 并在 vue 中使用如下翻译：

---
layout: default
---
<template>
  <h1>{% translate title %}</h1>
</template>

但这当然会给我留下每种语言的克隆编译 vue 应用程序。

如何正确地将 i18n/en.yml 和 i18n/de.yml 翻译中的变量传递到 Vue.js 并使用 Webpack 进行编译？

【问题讨论】：

【解决方案1】：

来自 Jekyll 的数据文件夹是 _data，参见 Jekyll-docs。

_data 文件夹的内容不会“移动”到输出 _site，但可以在构建站点时使用。

【讨论】：

感谢您的回答，但我仍然无法理解我的步骤。如果我在数据文件夹中有我的 en.yml 并且我试图通过 <template> <h1>{% for lang in site.data.en %}{{ site.data.lang.title }}{% endfor %}</h1> </template> 调用它，我仍然会在构建时得到无法读取 chrome 中未定义的属性“数据”
我，en.yml中当然有title："Hello world" 看来vue.js试图将site.data.lang.title作为js变量访问？
你能分享你的 en.yml 吗？在这里还是作为 github 中的要点？
您完成了文档中的这些步骤吗？ github.com/kurtsson/…
你好@KargWare，我的 en.yml 确实是一行，为了测试：title: "Hello EARTHLING!" 仅此而已，仅此而已。我长期使用 jekyll-multiple-languages-plugin 并用它构建了许多站点，插件本身不会引起任何问题。我不明白这两个构建过程（jekyll 构建和 vue 构建）如何在一个时间范围内共存。我看到的唯一解决方案是先运行 Jekyll，然后构建 Vue，但我认为有更充分的方法来实现这一点。