alefesouza/laravel-vue-i18n-generator

从您的 Laravel 翻译生成与 vue-i18n 兼容的包含文件。

0.2 2021-04-12 22:26 UTC

README

这是 martinlindhe/laravel-vue-i18n-generator 的分支,为 Laravel 8+ 支持此优秀包。

Build Status

Laravel 包,允许您使用 Laravel 本地化 与您的 vue 前端共享,使用 vue-i18nvuex-i18n

Laravel 5.7 注意!

Laravel 5.7 中配置路径已更改,为了使此包正常运行,您需要配置正确的 jsPath 和 jsFile 路径到您的 config\vue-i18n-generator.php

安装包

在您的项目中: composer require alefesouza/laravel-vue-i18n-generator --dev

接下来,发布包默认配置

php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"

使用 vue-i18n

接下来,您需要安装两种支持的 VueJs i18n 库之一。默认情况下,我们支持 vue-i18n。除此之外,我们还支持 vuex-i18n

如果您选择默认选项,您只需通过您喜欢的包管理器安装库即可。

vue-i18n

npm i --save vue-i18n
yarn add vue-i18n

然后使用以下命令生成包含文件:

php artisan vue-i18n:generate

假设您正在使用 vue-i18n 的最新版本(>=6.x),调整您的 vue 应用程序如下:

import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';

Vue.use(VueInternationalization);

const lang = document.documentElement.lang.substr(0, 2);
// or however you determine your current app locale

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

const app = new Vue({
    el: '#app',
    i18n,
    components: {
       ...
    }
}

对于较旧的 vue-i18n(5.x),初始化看起来如下:

import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

Vue.use(VueInternationalization);

Vue.config.lang = 'en';

Object.keys(Locales).forEach(function (lang) {
  Vue.locale(lang, Locales[lang])
});

...

使用 vuex-i18n

vuex-i18n

npm i --save vuex-i18n
yarn add vuex-i18n vuex

接下来,打开 config/vue-i18n-generator.php 并进行以下更改

- 'i18nLib' => 'vue-i18n',
+ 'i18nLib' => 'vuex-i18n',

然后使用以下命令生成包含文件:

php artisan vue-i18n:generate

假设您正在使用 vuex-i18n 的最新版本,调整您的 vue 应用程序如下:

import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated.js';

const store = new Vuex.Store();

Vue.use(vuexI18n.plugin, store);

Vue.i18n.add('en', Locales.en);
Vue.i18n.add('de', Locales.de);

// set the start locale to use
Vue.i18n.set(Spark.locale);

require('./components/bootstrap');

var app = new Vue({
    store,
    mixins: [require('spark')]
});

输出格式

您可以使用 --format 选项指定输出格式为 es6umdjson。默认为 es6

php artisan vue-i18n:generate --format {es6,umd,json}

UMD 模块的用例示例

php artisan vue-i18n:generate --format umd

UMD 模块可以导入到浏览器、构建系统、node 等。

现在,您可以将生成的脚本作为正常脚本包含在浏览器中,并使用 window.vuei18nLocales 引用它。

<script src="{{ asset('js/vue-i18n-locales.generated.js') }}"></script>

// in your js
Vue.use(VueI18n)
Vue.config.lang = Laravel.language
Object.keys(window.vuei18nLocales).forEach(function (lang) {
  Vue.locale(lang, window.vuei18nLocales[lang])
})

您仍然可以像上面所述那样在构建系统中 require/import 它。

这样做的一个优点是,您不必每次翻译文件更改或保存时都重新构建您的 JavaScript。一个好的例子是,如果您有一个可以读取和写入翻译文件的后端(如 Backpack),您可以在那里监听保存事件并调用 vue-i18n-generator。

生成多个文件

有时您可能希望生成多个文件,因为您想利用懒加载。因此,您可以在目标目录中指定生成器生成多个文件。

有两种选项

  1. 每个 Laravel 模块语言文件一个文件,使用开关 --multi
  2. 每个区域设置一个文件,使用开关 --multi-locales
php artisan vue-i18n:generate --multi{-locales}

参数

生成器调整字符串以与 vue-i18n 的命名格式化一起工作,因此您可以使用参数重用您的 Laravel 翻译。

resource/lang/message.php

return [
    'hello' => 'Hello :name',
];

在vue-i18n-locales.generated.js中

...
    "hello": "Hello {name}",
...

Blade模板

<div class="message">
    <p>{{ trans('message.hello', ['name' => 'visitor']) }}</p>
</div>

Vue模板

<div class="message">
    <p>{{ $t('message.hello', {name: 'visitor'}) }}</p>
</div>

注意事项

  • 生成的文件是一个ES6模块。

此处所述的更复杂的复数化本地化不支持,因为vue-i18n或vuex-i18n都不支持此功能。

许可证

根据MIT