vue国际化

# vue 国际化

# 简介

安装： npm install vue-i18n --save
语言切换 this.$i18n.locale = 'en-US';// 关键语句

# 封装

目录结构(demo)

| 1- config
| 2-- languages
| ----- chinese
| ----- english
| ----- japanese
| ----- index.js
| ----- zh.js
| ----- en.js
| ----- jn.js
| ----- en.js
index.js

  /**
    *  国际化文件
    */
  import Vue from 'vue';
  // 引入i18n国际化插件
  import VueI18n from 'vue-i18n';
  Vue.use(VueI18n);

  // 注册i18n实例并引入语言文件
  const i18n = new VueI18n({
    locale: 'zh',
    messages: {
      zh: require('@/config/languages/zh.js'), // 中文
      en: require('@/config/languages/en.js'), // 英文
      jn: require('@/config/languages/jn.js') // 日文
    }
  });
  export default i18n;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

main.js 使用

  import i18n from '@/config/languages';
  new Vue({
    el: '#app',
    router,
    i18n,
    store,
    render: h => h(App)
  });

1
2
3
4
5
6
7
8

# 使用

> 页面标签中 `<span>{{ $t('COMMON.COMMON_FORM.DOC_NAME') }}</span>`
> element-ui 变量中`:label="$t('COMMON.COMMON_FORM.DOC_NAME')"`

1
2

更新时间: 3/22/2021, 4:43:19 PM

← vue环境 vue指令→