使用Vue.js的i18n插件实现语言切换

1.安装i18n插件

npm install vue-i18n --save

2.在Vue项目中引入i18n插件

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

3.在 Vue.js 的 i18n 插件中，通常将语言包定义在单独的文件中，以便于管理和维护，在 src/lang 目录下创建 messages.js 文件

export default {
  en: {
    key1: 'value1',
    key2: 'value2',
    // ...
  },
  zh: {
    key1: 'value1',
    key2: 'value2',
    // ...
  }
};

4.在 main.js 文件中引入 Vue-i18n 插件，并创建 i18n 实例

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './lang/messages';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: localStorage.getItem('languageSet') || 'zh', // 默认语言为中文
  messages
});

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

5.在页面中使用语言包组件，使用 $t 方法获取对应的文本内容

<template>
  <div>
    <p>{{ $t('key1') }}</p>
    <p>{{ $t('key2') }}</p>
    <button @click="changeLanguage">Change Language</button>
  </div>
</template>

6.切换语言

<script>
export default {
  methods: {
    /* 切换语言 */
    changeLanguage() {
      const currentLocale = this.$i18n.locale;
      const nextLocale = currentLocale === 'en' ? 'zh' : 'en';
      localStorage.setItem("languageSet", nextLocale);
      this.$i18n.locale = nextLocale;
    }
  }
};
</script>