Vue 项目中配置i18n 国际化 (带注释)

1: 安装 vue-i18n

npm install vue-i18n

2: 创建语言文件

在src目录下新建lang文件夹，en.json为英文语言包，zh.json为中文语言包

文件的格式是这样的

// en.json
export default {
    'name': 'name',
    'user': 'user',
    .....
    
}

// zh.json
export default {
    'name': '姓名',
    'user': '用户',
    .....
}

3: 配置 vue-i18n 实例

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

import zh from './config/zh';
import en from './config/en';

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: require('./locales/en.json'),
    zh: require('./locales/zh.json')
  }
});

export default i18n;

 4: 在组件中使用翻译消息

在Vue组件的模板中，使用 $t方法来访问翻译消息，并在页面上显示文本内容：

<template>
  <div>
    <p>{
   
   { $t('name') }}</p>
    <p>{
   
   { $t('user') }}</p>
  </div>
</template>

5: 切换语言

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
    
    <p>{
   
   { $t('user') }}</p>
    <p>{
   
   { $t('name') }}</p>
  </div>
</template>

methods: {
  switchLanguage(lang) {
    this.$i18n.locale = lang;
  }
}

也可以把状态存到 localStorage 里面 这边更加方便