前端vue2多语言切换

Vue.js 2.x 中实现多语言切换通常会利用 `vue-i18n` 这个插件，它提供了国际化的支持。以下是基本步骤：

1. 安装依赖：

   npm install vue-i18n vuex-persistedstate --save

2. 创建国际化配置文件 (`i18n.js`)：

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

   const messages = {
     en: require('./locales/en.json'),
     zh: require('./locales/zh.json') // 或其他语言文件路径
   }

   new Vue({
     i18n: new VueI18n({
       locale: 'en', // 默认语言
       fallbackLocale: 'en', // 当找不到用户选择的语言时使用的语言
       messages,
     }),
   }).$mount('#app')

3. 在组件中使用国际化：

   <template>
     <div v-bind:title="$t('title')" />
     <!-- 其他元素可以使用 $t 函数 -->
   </template>

   <script>
   export default {
     computed: {
       title() { return this.$t('header.title') }
     }
   }
   </script>

4. 在需要切换语言的地方，你可以使用 `this.$i18n.locale` 属性更改语言，并重新加载页面或局部刷新内容：

   this.$store.dispatch('setLanguage', 'zh') // 使用 Vuex 管理语言状态