Question

我有一个多语言站点。使用Vue.js和Laravel。但是，vue的翻译页面不会呈现任何更改。

这是我的app.js：

import VueI18n from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
    
    ....

这是我的blade.php文件：

<operations baseurl="{{ url('/') }}"
              apiurl="{{ Config('main.apiHostName') }}"
              assignurl="{{ Config('main.apiOrdersAssignUrl') }}"
              updateurl="{{ Config('main.apiOrdersUpdateUrl') }}"
              cancelurl="{{ Config('main.apiOrdersCancelUrl') }}"
              notifyonlineurl="{{ Config('main.apiOrdersNotifyOnlineUrl') }}"
              notifyactiveurl="{{ Config('main.apiOrdersNotifyActiveUrl') }}"
              cid="{{ session('id') }}" csession="{{ session('session') }}"
              default-zoom="11" center-lat="3.182355" center-lng="101.664624"
              Vue.config.lang = '{{ app()->getLocale() }}'>
  </operations>

如何同步Vue和Laravel文件（blade.php）以呈现其他语言？

Answer 1

对我来说，我通过传递翻译来将翻译添加到Vue组件中，因为道具可以说我想在我的网站中同时支持阿拉伯语和英语，所以这里是步骤

首先在lang目录中创建翻译文件

resources/lang/en/main.php    //English Translation
resources/lang/ar/main.php    //Arabic Translation

让我们说这些文件仅返回一个要翻译的密钥，因此它们看起来像这样

英文文件

<?php
//resources/lang/en/main.php

return [
    'greeting' => 'Hello',
];

阿拉伯文文件

<?php
//resources/lang/ar/main.php

return [
    'greeting' => 'مرحبا',
];

让我们说您希望能够在您的Vue组件之一上使用这些翻译，例如，TestComponent.vue要做的就是在您的一个刀片文件中呈现此组件，我将我的刀片称为{ {1}}

test.blade.php

现在让我们来看看如何在//test.blade.php . . . <body> <div id="app">  <test-component :trans="{{json_encode(trans('main'))}}"></test-component> </div> </body> . . .

内部使用翻译

TestComponent.vue

希望这个解释有助于解决您的问题，祝您好运。

vue页面不呈现更改

1 个答案: