面试题：Vue项目中如何配置i18n实现基本的国际化

Question

请阐述在Vue项目里，使用vue - i18n插件配置国际化的基本步骤，包括安装插件、引入插件、配置语言文件等操作。

Answer 1

1. 安装插件：
   • 在项目根目录下，通过npm安装vue - i18n插件，运行命令npm install vue - i18n --save。
2. 引入插件：
   • 在main.js文件中，引入vue - i18n：

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

3. 配置语言文件：
   • 在项目中创建一个目录用于存放语言文件，例如src/locales。
   • 在该目录下创建不同语言的JSON文件，比如zh.json（中文）、en.json（英文）。
   • zh.json示例：

{
  "message": {
    "hello": "你好"
  }
}

• en.json示例：

{
  "message": {
    "hello": "Hello"
  }
}

4. 创建VueI18n实例：
   • 在main.js中，创建VueI18n实例并挂载到Vue实例上：

const i18n = new VueI18n({
  locale: 'zh', // 设置默认语言
  messages: {
    zh: require('./locales/zh.json'),
    en: require('./locales/en.json')
  }
});
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

5. 在模板中使用：
   • 在Vue组件的模板中，可以通过$t方法来使用国际化内容，例如：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
  </div>
</template>