vue多语言化

随着国际化的趋势，项目中配置多语言切换也越来越有必要，本篇文章将会介绍如何在vue项目中配置多语言化

• 安装：

  npm i vue-i18n
  

• 导入注册：(因为后续可能涉及很多配置翻译，所以我们提前把配置抽离为单独的文件)

  // src/plugins/VueI18n/index.js：
  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  Vue.use(VueI18n);
  
  // 定义各语言的配置
  const messages = {
      zn: {
          message: {
              hello: '你好，世界',
          },
          name: '可乐',
      },
      en: {
          message: {
              hello: 'hello world',
          },
          name: 'cola',
      },
      ja: {
          message: {
              hello: 'こんにちは、世界',
          },
          name: 'コーラ',
      },
  };
  
  // 通过选项创建 VueI18n 实例
  const i18n = new VueI18n({
      locale: 'zn', // 设置默认地区
      messages, // 设置配置信息
  });
  
  export default i18n;
  

• vue实例绑定i18n：

  // src/main.js
  import i18n from './plugins/VueI18n/index';
  
  new Vue({
      router,
      store,
      i18n,
      render: h => h(App),
  }).$mount('#app');
  

• vue文件中使用(插值表达式使用 i18n.locale 时区，即可做到语言切换（chooesLange方法）
  插值表达式使用 $t('xx') 写法，xx即为messages配置中的字段

• 效果：

  
  
  GIF.gif

哈哈，样式比较丑，到时候可以根据项目设计自己做调整。

以上即为在普通的vue项目中实现多语言化的效果。

如有问题，请指出，接受批评。

期待能够对你有所帮助~

QQ图片20210513201556.gif