README

弃用通知

由于Vue-i18n的动态区域特性在6.x版本中被移除，此包已不再维护。如果Vue-i18n将来有任何类似功能，我们可能会考虑重新维护此包。

此桥接器让您可以完全自由地使用Laravel内置的翻译技术翻译Vue（特别是SPA）前端，而不会牺牲前端性能或用户体验。它确保只有客户端请求的语言需要由客户端下载。您不再被迫在javascript中维护第二个翻译位置，或者预先生成包含所有区域字符串的javascript文件。

此包旨在与vue-i18n直接配合使用，尤其是它的动态区域功能。然而，应该可以以最小的javascript工作量使其与其他vue插件或甚至其他javascript框架一起工作。

其他方法和灵感

为可翻译字符串生成javascript字典在某些用例中可能完全合适。如果您是这样，您应该完全检查Martin Lindhe的杰出作品laravel-vue-i18n-generator。

感谢他和他包的启发。

安装

导航到您的项目并运行composer命令

composer require appointer/laravel-vue-i18n-bridge

下一步是注册服务提供者

// config/app.php
'providers' => [
    ...
    \Appointer\VueTranslation\VueTranslationServiceProvider::class,
];

最后，您需要注册此包的路由

// app/Providers/RouteServiceProvider.php
public function boot()
{
    parent::boot();

    Appointer\VueTranslation\VueTranslation::routes();
}

(可选) 如果您想，您可以发布配置。这让您可以完全控制白名单和黑名单等。使用以下Artisan命令

php artisan vendor:publish --provider="Appointer\VueTranslation\VueTranslationServiceProvider::class" --tag="config"

注意：白名单和黑名单也可以使用VueTranslation::whitelist()和VueTranslation::blacklist()方法分别进行。

实现javascript

不用担心，这很简单。我们以axios为例作为HTTP客户端。如果您有一个现成的laravel前端，您可能已经安装了它。您只需用以下实现替换您当前的区域设置即可

// Keep in mind, that this requires the vue-i18n plugin.
// We are following https://kazupon.github.io/vue-i18n/dynamic.html

var lang = 'en';
Vue.locale(lang, function() {
    return axios.get('/i18n/' + lang)
        .then(function(response) {
            return Promise.resolve(response.data[lang]);
        })
        .catch(function(error) {
            return Promise.reject(error);
        });
}, function() {
    Vue.config.lang = lang;
});

陷阱

• 支持并自动加载供应商翻译。虽然Vue-i18n不支持与laravel类似的作用域命名空间（`{namespace}::{key}`），但供应商命名空间是翻译键的一部分（`{namespace}.{key}`）。
• 目前只能使用根组（例如翻译文件auth.php => auth）或翻译的命名空间（`namespace::` => namespace）来设置白名单和黑名单。

测试

可以使用以下命令执行测试

./vendor/bin/phpunit

贡献

每个帮助都十分受欢迎。您是否有问题，或者有扩展此项目的优秀想法？请随时发起拉取请求或提交问题。

如果您提交一个错误报告，您的问题应包含标题和问题清晰的描述。您还应尽可能包括与问题相关的信息，以及一个展示问题的代码示例。错误报告的目标是使您和他人能够轻松地复现错误并开发修复方案。

请使用问题跟踪器来报告问题。

许可证

此库是开源软件，遵循MIT许可证。