[I18n-js]在Vue.js中使用Rails应用程序的i18n(t方法)

开发Rails应用程序时，我在Vue.js中编写了前端，但是
"让我们充分利用i18n，并将源代码中扎实的日语文字数量减少到零！"
如果
像t('create')这样的t方法，可以在Rails端使用
"如果我想将其与Vue.js一起使用怎么办？"
自从成为之后，我将写下实现记录。

前提

macOS Mojave 10.14.6
ruby2.5.5
Rails 5.2.3
Vue 2.6.10
webpacker 4.0.7

推出了ruby" i18n-js"

ruby文件

1	gem 'i18n-js'

终端

1	$ bundle install

当将I18n与

JavaScript一起使用时，不能直接使用config/locales/ja.yml，但是会将其转换为.js并读取和使用。
i18n-js是其转换输出的瑰宝。

创建i18n-js.yml

创建i18n-js.yml，这是一个设置如何转换和输出规则的文件。
以下命令将在configディレクトリ中创建一个新命令。

终端

1	rails generate i18n:js:config

config / i18n-js.yml

1
2
3

translations:
- file: "app/javascript/packs/i18n/%{locale}.js"
prefix: "import I18n from './i18n';\n"

使用

文件选项来设置路径，以指定要转换和输出以及按语言输出的位置。
(如果您看官方等，似乎所有语言的设置都打包在通常使用的设置中的一个名为translation.js的文件中，但这一次它是按语言分类的，因为文件变得沉重。)

由于已安装

webpacker，因此将在app / javascript / packs下创建i18n目录并在其中进行管理。

您可以通过添加前缀选项将任何字符串添加到生成的js文件的开头。
添加的含义将在后面描述。 <铅>

限制允许的语言环境

如果按原样执行稍后描述的rake i18n:js:export，将生成所有允许的语言的js文件。 (就我而言，大约是90 )
如果您在日本发展，我认为日语和英语已经足够，所以这次我将只生成这两种语言。

配置/ application.rb

1
2
3
4
5

# デフォルトのlocaleを日本語(:ja)にする
config.i18n.default_locale = :ja

# 許可するlocaleを日本語(:ja)と英語(:en)に限定する
config.i18n.available_locales = %i[ja en]

现在，ja.yml将转换为ja.js，而en.yml将转换为en.js。

用rake i18n输出：js：导出

gem执行命令以转换为" i18n-js"准备的js的语言环境文件。

终端

1	$ rake i18n:js:export

输出到先前i18n-js.yml文件中file选项指定的路径

config / i18n-js.yml

1
2
3

translations:
- file: "app/javascript/packs/i18n/%{locale}.js" # ←これ
prefix: "import I18n from './i18n';\n"

スクリーンショット 2020-04-03 11.44.15.png

您确认

ja.js和en.js吗？

应用程序/ javascript /包/ i18n / ja.js

1
2
3

import I18n from './i18n';
I18n.translations || (I18n.translations = {});
I18n.translations["ja"] = I18n.extend((I18n.translations["ja"] || {}), {"403_forbidden":"ページを表示できません", ......(中略)..... ,"zip":"郵便番号"});

向内看
在第一行，我添加了i18n-js.yml文件的prefix选项。
第三行将Rails的i18n使用的ja.yml文件的内容压缩为一行。
最终tメソッド将从中寻找匹配项。

编辑i18n.js

同时，在public/javascript/上创建了i18n.js。
它是一个包含许多方法的文件，这些方法是该函数的基础。

根据需要从中更改defaultLocale和locale。
它与rails gem i18n不同，因此需要单独定义。
スクリーンショット 2019-11-01 10.45.08.png
在日语中，它是"ja"。

移动i18n.js

将刚刚编辑的public/javascript/i18n.js移动到app/javascript/i18n/i18n.js。
スクリーンショット 2020-04-03 11.45.32.png
每次执行rake i18n:js:export命令时，都会在public/packs中创建初始化的i18n.js，因此必须将修改后的i18n.js移到另一个位置。 (可能没有必要，但是我不知道解决方案，不能像这样操作。)

这次，我们将其移至与ja.js相同的位置，以使其易于管理。

这样，添加有prefix选项的ja.js第一行中的描述将非常有用。

应用程序/ javascript /包/ i18n / ja.js

1
2
3

我试图从第二行调用一个名为I18n的模块，但是我无法调用任何尚未导入的模块，因此我首先将其导入。
由于我将其放在同一目录中，因此该路径可以是相对路径。

具有webpack加载(语言环境).js

有两种方法。

1.在入口点

导入％{locale} .js文件

application.js

1 2	// ?(中略)? import './i18n/ja'

在webpacker入口点为每个语言环境导入js文件。 (如果需要en，请同时导入en)
由于webpack是将导入文件捆绑在Imozuru公式中的目标，因此不必导入i18n.js，这是此处的方法体。

2.在每个Vue组件中导入Import

sample.vue

1
2
3
4
5
6
7
8
9
10

<template>
</template>

<script>
import I18n from "../i18n/i18n";
import "../i18n/ja";

export default {
}
</script>

此方法很麻烦，因为每次创建Vue组件时都必须添加它，但是
如果所有Vue文件中只有一些Vue组件，那么如果您想首先使用I18n，则此方法非常有用。

前面我提到过，没有必要在第1号中称呼主体import I18n from "../i18n/i18n";，而是
如果即使以后要介绍的奖金2：脚本也要使用I18n，该怎么办？在
'I18n' is not defined
因为林特有可能会生气，所以我也为方便起见而称呼主体。

(*我介绍了两种方法，但是我将通过下面的第二种方法进行描述)

检查是否可以在控制台上使用I18n命令

目前是否可以使用I18n，
启动Rails服务器并在本地访问Rails应用程序。
让我们使用chrome开发人员工具像输入图片一样进行检查。
スクリーンショット 2019-11-01 10.35.10.png
第二种是调用您自己的应用程序中定义的那个。

创建一个混入以在vue文件中省略I18n命令

现在，这很麻烦，因为除非每次像I18n.t('hoge')一样在开头添加i18n，否则无法调用它。
因此，创建mixin以便可以使用缩写t('hoge')来调用它。

应用程序/ javascript /包/ mixins / i18n.js

1
2
3
4
5
6

export const i18n = {
methods: {
t: (...args) => I18n.t(...args),
currentLocale: () => I18n.currentLocale()
}
};

在组件中导入mixin

sample.vue

1
2
3
4
5
6
7
8
9
10
11
12

<template>
</template>

<script>
import I18n from "../i18n/i18n";
import "../i18n/ja";
import { i18n } from "../mixins/i18n";

export default {
mixins: [i18n]
}
</script>

现在您可以理解在vue文件中调用的t('hoge')是I18n.t('hoge')。

检查t方法是否可以在vue文件中使用

sample.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
<p>{{ t('create') }}</p>
</template>

<script>
import I18n from "../i18n/i18n";
import "../i18n/ja";
import { i18n } from "../mixins/i18n";

export default {
mixins: [i18n]
}
</script>

进入使用上述vue文件的页面，
显示在I18n中定义的日语(在这种情况下为"注册")。

这就是

的全部。感谢你的努力工作！

奖励1：如果我在Rails端修改i18n yaml文件怎么办？

终端

1	$ rake i18n:js:export

请在每次进行更正时进行转换。

奖励2：如果即使在脚本中也要使用I18n，该怎么办？

mixin允许您在template内使用t('hoge')，但是
在script中不能将其省略。

sample.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<p>{{ title }}</p>
</template>

<script>
import I18n from "../i18n/i18n"; // ←敢えて読み込んでいます
import "../i18n/ja";
import { i18n } from "../../mixins/i18n";

export default {
mixins: [i18n],
data() {
return {
title: I18n.t("title") // ←ここで使うために
};
}
}
</script>

奖励3：如何传递论点？

用

{}括起来(大括号)

config / locale / ja.yml

1
2
3
4

ja:
mypage: "マイページ"
msg:
update_successful: "%{v}を更新しました。"

js文件
スクリーンショット 2019-11-13 13.24.10.png

vue文件

sample.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<p>{{ t('msg.update_successful', { v: t('mypage') }) }}</p>
<p>{{ message }}</p>
// どちらも出力結果は同じ
</template>

<script>
import { i18n } from "../mixins/i18n";

export default {
mixins: [i18n],
data() {
return {
message: I18n.t('msg.update_successful', { v: I18n.t('mypage') })
};
}
}
</script>

参考文章

？i18n-js官方文档
Https://github.com/fnando/i18n-js
[Stackoverflow]是否在共享单个存储库中的语言环境的Rails Vue.js实例中使用I18n？
https://stackoverflow.com/questions/48950685/is-there-a-i18n-on-a-railsvue-js-instance-which-share-locales-in-a-single-repos
？[Qiita] i18n-js仅加载所需的语言并提高性能
https://qiita.com/konifar/items/9886c7da97f20d3206cc
？[Qiita]使用webpacker运行react_rails和i18n-js
https://qiita.com/Atsuyoshi-N/items/48f8b5d5802b9ac47732#i18n固定rails侧