adaa / laravel-vue-i18n-generator
从您的Laravel翻译中生成与vue-i18n兼容的包含文件。
Requires
- php: >=7|>=8|>=8.1
- ext-json: *
- ext-mbstring: *
- illuminate/console: ^5.0|^6.0|^7.0|^8.0|^9.0
- illuminate/support: ^5.0|^6.0|^7.0|^8.0|^9.0
Requires (Dev)
- orchestra/testbench: 3.1.*
- phpunit/phpunit: ~4.7
This package is not auto-updated.
Last update: 2024-09-30 12:53:22 UTC
README
Laravel 5 包,允许您使用 Laravel 本地化 与您的 vue 前端共享,使用 vue-i18n 或 vuex-i18n。
由 https://github.com/tayeb-ali/laravel-vue-i18n-generator 分支
Laravel 5.7 注意!
在Laravel 5.7中,配置路径已更改,为了使此包正常工作,您需要配置正确的jsPath和jsFile路径到您的 config\vue-i18n-generator.php
。
安装包
在您的项目中: composer require adaa/laravel-vue-i18n-generator --dev
对于Laravel 5.4及以下版本
对于框架的较旧版本
在 config/app.php
中注册服务提供者
Adaa\VueInternationalizationGenerator\GeneratorProvider::class,
接下来,发布包默认配置
php artisan vendor:publish --provider="Adaa\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
选项指定输出格式为 es6
、umd
或 json
。(默认为 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。
生成多个文件
有时您可能想要生成多个文件,因为您想利用懒加载。为此,您可以在目标目录内指定生成器产生多个文件。
有两种选项
- 使用
--multi
开关为每个Laravel模块语言文件生成一个文件 - 使用
--multi-locales
开关为每个区域生成一个文件
php artisan vue-i18n:generate --multi{-locales}
参数
生成器调整字符串以与vue-i18n的命名格式化一起工作,因此您可以重复使用您的Laravel翻译与参数。
资源/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许可下