Vue I18n 在 Vuetify 项目中使用

草帽lufei

发布于 2022-07-29 09:29:15

1.4K0

发布于 2022-07-29 09:29:15

文章被收录于专栏：程序语言交流

官网

http://kazupon.github.io/vue-i18n/zh/introduction.html

https://vuetifyjs.com/en/features/internationalization/#creating-a-translation

介绍

Vue I18n 是 Vue.js 的国际化插件。

安装

cdn

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

npm

npm install vue-i18n

yarn

yarn add vue-i18n

vue-i18n 在 vue 单页面中使用

index.html 可以直接在浏览中运行, 如下效果

http://mpvideo.qpic.cn/0bf244abiaaateaankstyvqfbz6dcttqafaa.f10002.mp4?

<!DOCTYPE html>
<html>
  <head>
    <title>vue-i18n</title>
  </head>

  <body>
    <div id="app">
      {{msg}}
      <br /><br />
      语言选择：<select v-model="selected" @change="changeLang()">
        <option value="en">English</option>
        <option value="zh">简体中文</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      Selected: {{selected}}
      <br /><br />
      <p>{{$t("message.hello")}}</p>
      <ul>
        <li v-for="(item, key) in items" :key="key">{{item.title}}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    <script>
      // 国际化内容配置
      const messages = {
        en: {
          message: {
            hello: "hello world",
            li1: "li1",
            li2: "li2",
            li3: "li3",
          },
        },
        zh: {
          message: {
            hello: "你好 世界",
            li1: "标签一",
            li2: "标签二",
            li3: "标签三",
          },
        },
      };

      const i18n = new VueI18n({
        locale: "en",
        messages,
      });

      var app = new Vue({
        el: "#app",
        i18n,
        data: {
          msg: "Hello Vue i18n",
          selected: "en",
        },
        computed: {
          //  重点：vue 列表数据国际化处理，必须在 computed 中绑定
          items: function () {
            return [
              {
                title: this.$t("message.li1"), // 获取 i18n 配置数据
              },
              {
                title: this.$t("message.li2"),
              },
              {
                title: this.$t("message.li3"),
              },
            ];
          },
        },
        methods: {
          // 切换语言配置
          changeLang() {
            i18n.locale = this.selected
          },
        },
      });
    </script>
  </body>
</html>

vue-i18n 在 vue，vuetify 项目中使用

src/plugins/vuetify.js 中引入 vue-i18n, 设置后导出


import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

import colors from 'vuetify/lib/util/colors'
import VueI18n from 'vue-i18n'

Vue.use(Vuetify)
Vue.use(VueI18n)

// 国际化显示配置
const messages = {
  en: {
    $vuetify: {
      examplesButton: 'Examples',
      sidebar: {
        title1: {
          value: 'Basic',
          children: {
            title1: {
              value: 'HelloWorld'
            },
            title2: {
              value: 'UpdateEnterExit'
            },
            title3: {
              value: 'GeneralUpdatePatternI'
            },
            title4: {
              value: 'SelectElementAndBindData'
            },
            title5: {
              value: 'SelectInsertRemove'
            }
          }
        }
      }
    }
  },
  zh: {
    $vuetify: {
      examplesButton: '示例',
      sidebar: {
        title1: {
          value: '基础',
          children: {
            title1: {
              value: '你好，世界'
            },
            title2: {
              value: '更新、添加、退出'
            },
            title3: {
              value: '生成、更新 I'
            },
            title4: {
              value: '选择元素并绑定数据'
            },
            title5: {
              value: '选择、添加、移除'
            }
          }
        }
      }
    }
  }
}

// 默认语言 en, 项目使用 sessionStorage 做语言记录
let i18nLocale = 'en'
if (sessionStorage.getItem('i18nLocale')) {
  i18nLocale = sessionStorage.getItem('i18nLocale')
}

// 实例化 vuei18n
const i18n = new VueI18n({
  locale: i18nLocale,
  messages
})

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#409eff',
        secondary: '#54a8ff',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      },
      dark: {
        primary: colors.blue.darken1
      }
    }
  },
  // vuetify 配置中添加 i18n lang 配置
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
}

const vuetify = new Vuetify(opts)
// 导出 i18n
export { vuetify, i18n }

设置单个按钮国际化文本, 注意： vuetify 中的模板和常规 vue 项目中的模板不一致

{{$vuetify.lang.t('$vuetify.examplesButton')}}

设置列表国际化处理，列表为通过 Data 动态生成的，Data 数据必须写在 computed 中

 ...
 computed: {
    // 动态侧边栏
    items: function () {
      return [
        {
          icon: 'mdi-alpha-b-box-outline',
          title: this.$vuetify.lang.t('$vuetify.sidebar.title1.value'), // 侧边栏菜单项
          children: [  // 菜单子项
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title1.value'), path: '/examples/helloworld' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title2.value'), path: '/examples/updateenterexit' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title3.value'), path: '/examples/generalupdatepattern' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title4.value'), path: '/examples/selectelementbinddata' },
            { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title5.value'), path: '/examples/selectinsertremove' }
          ],
          appendIcon: 'mdi-chevron-down',
          active: true
        },
        ...

效果例子

http://mpvideo.qpic.cn/0bf26aaa6aaaceabxost4zqfb4gdb7yaadya.f10002.mp4?