vue实现中英/中外语言切换

在Vue中实现中英/中外语言切换，可以使用Vue I18n插件。以下是一个简单的例子：

1. 安装Vue I18n：

npm install vue-i18n

2. 设置Vue I18n：

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
Vue.use(VueI18n);
 
const messages = {
  en: {
    message: {
      hello: 'Hello world',
    }
  },
  cn: {
    message: {
      hello: '你好世界',
    }
  }
};
 
const i18n = new VueI18n({
  locale: 'cn', // 默认语言
  messages,
});
 
export default i18n;

3. 在Vue根实例中使用i18n：

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';
 
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app');

4. 在Vue组件中使用语言包：

<!-- App.vue -->
<template>
  <div id="app">
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('cn')">中文</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
};
</script>

用户点击按钮切换语言时，更新this.$i18n.locale即可实现语言的切换。这里的$t是Vue I18n的插槽，用于将语言包中的字符串渲染到模板中。