使用 vue-i18n 插件进行国际化答案

【问题标题】：Internationalization with vue-i18n plugin使用 vue-i18n 插件进行国际化
【发布时间】：2019-03-23 19:04:11
【问题描述】：

我有添加翻译的应用程序，我想添加按钮事件来更改主页上的语言。

这是我所拥有的：

      <div class="lang-choice">
    <span class="lang">PL</span>
    <img class="angle-down" src="http://localhost:8080/assets/img/yellow_angle_down.png" alt="">
    <div class="lang-dropdown" style="display: block; opacity: 1;">
        <ul class="lang-list">
            <li><a href="">RU</a>
            </li>
            <li><a href="">UA</a></li>
            <li><a href="">EN</a>
            </li>
        </ul>
    </div>
</div>

这里是 app.js

import store from './store/store.js'

// Translation plugin for static text
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated.js';
window.Vue = require('vue');

// language settings
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', Locales.en);
Vue.i18n.add('pl', Locales.pl); 
Vue.i18n.add('uk', Locales.uk); 

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

const app = new Vue({
    el: '#app',
    store,
});

我正在使用这个生成器https://github.com/martinlindhe/laravel-vue-i18n-generator。

这是我在 vue js 中翻译文本的方法

v-bind:placeholder="$t('Szukaj umiejętności... ')"

当我运行生成器时，一切都按预期工作，我可以翻译文本

如何添加按钮来翻译我的页面？例如，点击 ENG 按钮将页面翻译成英文，然后点击 RU 将页面翻译成 RU，

【问题讨论】：

标签： javascript html vue.js localization vue-i18n

【解决方案1】：

vuex-i18n 暴露了$i18n.set()，因此您应该可以在模板中执行以下操作：<button @click="$i18n.set('en')">en</button>。

【讨论】：