vue中如何使用i18n实现国际化

一、前言

在项目中需要使用多语言切换，也就是我们所说的国际化，在vue中所匹配的国际化插件工具就是vue-i18n；

二、如何实现国际化

1. 首先我们在项目中安装vue-i18n依赖包：

npm install vue-i18n --S 或者 yarn add vue-i18n

2. 创建语言包（来自你项目中的所有文案），i18n实例，并在main.js文件中引入：

• 文件目录结构

|-- main.js 导入文件
|-- i18n
  |-- index.js 创建实例对象
  |-- locale 各种语言包
    |-- en.js  英文包
    |-- cn.js  中文包

• i18n/index.js 创建i18n实例对象，代码如下

import { createI18n } from 'vue-i18n'
import cn from './locale/cn'
import en from './locale/en'
const messages = {
  en: {
    ...en,
  },
  cn: {
    ...cn,
  }
};
const i18n = createI18n({
  locale: localStorage.lang || 'cn',
  messages,
});
export default i18n;

• 接下来我们根据目录结构新建js文件作为语言包：

module.exports = {
  loginPage {
      login: '登录',
      register: '注册'
  }
}

其他语言包则改写相应的文案即可（建议分页面模块编写语言包，不然脑瓜容易晕）

module.exports = {
   loginPage {
      login: 'login',
      register: 'register'
   }
}

• 在main.js文件中引入i18n实例并挂载到Vue实例上即可：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from './i18n/index';

new Vue({
    i18n,  // 挂载到Vue实例之上
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

3. 实现语言切换组件，代码如下：

这里我们封装一个小方法locale，引入调用即可

export const locale = (lang) => {
  if (lang) {
    localStorage.setItem('lang', lang);
  } else if (lang === null) {
    localStorage.removeItem('lang');
  } else {
    lang = localStorage.getItem('lang');
  }
  return lang;
}

最后补充下vue-i18n文案渲染的模板语法

//vue组件模板的使用
{{$t('loginPage.login')}}

//vue组件模板数据绑定的使用


//vue组件data中赋值的使用
data() {
   return {
      msg:this.$t('loginPage.login')
   }
}