在Vue中使用i18n进行国际化

介绍

vue-i18n是一个适用于Vue项目的国际化库，借助这个库可以方便地在一个项目中支持多国语言。在现成的项目中添加vue-i18n是非常方便的，本文假设你已经有了自己的Vue项目，如果你想新建一个，我推荐使用Vue的官方命令行工具Vue CLI，关于如何使用Vue CLI创建新项目，可以参考我的另外一篇文章Vue CLI 3 快速搭建项目。

安装

npm install --save vue-i18n

初始配置

我们需要将一个i18n组件挂载到Vue实例上，为了让我们的项目组件化，我们在/src目录下新建一个.js文件，命名为i18n.js，在这个js文件中加入如下代码：

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

Vue.use(VueI18n);

以上代码只是引入了i18n这个库，并没有任何实质性的操作，接下来我们就要建立几个静态的语言文件，作为用户使用不同语言时出现在网页上的文本内容。

由于这些语言文件是静态文件，在/src/assets目录下新建一个名为i18n的文件夹，为了方便，我这里只设置两种语言，中文和英文，在实际操作时可以用同样的方法设置多种语言。

建立zh.js文件，作为中文语言文件，再建立en.js文件，作为英文语言文件，文件名没有硬性要求，这里为了表意清楚选择了这样的命名方式，读者可以根据自己的需求自由命名。现在我们的文件结构应该是这样的：

接下来让我们给语言文件加一些内容，由于这些语言文件最后是要导出给i18n的主配置文件使用的，我们就直接写成一个JavaScript对象的形式，并默认导出。

// zh.js
export default {
   
   
  greeting: '欢迎',
  numbers: ['一', '二', '三'],
  buttons: {
   
   
    change: '切换语言',
  }
}

// en.js
export default {
   
   
  greeting: 'Welcome',
  numbers: ['One',