如何使用Vue进行国际化和多语言支持

npm install vue-i18n --save

// src/lang/languages.jsconst languages = {  en: {    welcome: 'Welcome to my website!',    about: 'About',    contact: 'Contact',  },  zh: {    welcome: '欢迎来到我的网站！',    about: '关于',    contact: '联系',  },}export default languages;

// main.jsimport Vue from 'vue';import VueI18n from 'vue-i18n';import languages from './lang/languages';Vue.use(VueI18n);const i18n = new VueI18n({  locale: 'en', // 默认语言  messages: languages,});new Vue({  i18n,  render: h => h(App),}).$mount('#app');

<template>  <div>    <h1>{{ $t('welcome') }}</h1>    <ul>      <li>{{ $t('about') }}</li>      <li>{{ $t('contact') }}</li>    </ul>  </div></template>

<template>  <div>    <button @click="switchLanguage('en')">English</button>    <button @click="switchLanguage('zh')">中文</button>      <h1>{{ $t('welcome') }}</h1>    <ul>      <li>{{ $t('about') }}</li>      <li>{{ $t('contact') }}</li>    </ul>  </div></template><script>export default {  methods: {    switchLanguage(lang) {      this.$i18n.locale = lang;    },  },}</script>