README

Laravel 6包，允许您使用vue-i18n或vuex-i18n将Laravel本地化与您的vue前端共享。

安装包

对于Laravel 10.x

在项目中：composer require happones/laravel-vue-i18n-generator --dev

默认情况下，Laravel应用程序骨架不包括lang目录。如果您想自定义Laravel的语言文件，您可以通过lang:publish Artisan命令发布它们。阅读更多。

对于Laravel 9.x及更高版本

在项目中：composer require happones/laravel-vue-i18n-generator:0.1.47 --dev

对于Laravel 6.0及以下版本

对于框架的旧版本

在config/app.php中注册服务提供者

Happones\VueInternationalizationGenerator\GeneratorProvider::class;

接下来，发布包默认配置

php artisan vendor:publish --provider="Happones\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: {
       ...
    }
}

Laravel Inertia

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
    locale: 'ja', // set locale
    fallbackLocale: 'en', // set fallback locale
    messages, // set locale messages
    // If you need to specify other options, you can set other options
    // ...
})

createInertiaApp({
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({ render: () => h(app, props) });
        VueApp.use(plugin)
            .use(i18n)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

对于较旧的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选项指定输出格式（默认为es6），从es6、umd或json。

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许可下