vue-i18n

该文章整理于2022.05.18

1.安装

yarn add vue-i18n
npm install vue-i18n --save

2.main.js

import VueI18n from "vue-i18n";
Vue.use(VueI18n);

// 定义挂载文件
const i18n = new VueI18n({
  // locale: "zh", // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  locale: localStorage.getItem('lang') || 'zh',
  messages: {
    zh: require("./vueI18n/language-zh"), 
    en: require("./vueI18n/language-en"),
  },
});


new Vue({
  router,
  store,
  i18n,// 挂载在全局
}).$mount("#app");

3.新建文件夹，文件

在src目录下，建立vueI18n文件夹
在VueI18n文件夹下新建文件language-zh.js和language-en.js

文件夹树形图

4.翻译字段

同一个字段的中英文表达方式分别放在language-zh.js和language-en.js中
例如：

// language-zh.js
module.exports = {
  records: {
    btn1: "查询",
  },
};

// language-en.js
module.exports = {
  records: {
    btn1: "Search",
  },
};

// 在使用的组件中
<a-button html-type="submit" type="primary" @click="handleSearch()">{{$t("records.btn1")}}</a-button>

5.使用中

在ant-design-vue中使用

（1）placeholder

:placeholder="$t('records.placeholder1')"
注意：$t()本身就是变量的形式，加字段变量的话，注意作为变量放在html中的引号关系，单引号在外面，内部加双引号；双引号在外部，单引号在内部

（2）在table中

在组件的template中，调用$t()方法
在组件的script中，调用this.$i18n.t()方法

 columns: [
        { title: this.$i18n.t('records.col1'), dataIndex: 'storeName' },
]

（3）在js工具文件中

// 引入
import VueI18n from "vue-i18n";
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh',
  messages: {
    'zh': require('./vueI18n/language-zh'),
    'en': require('./vueI18n/language-en')
  }
})

// 使用
i18n.t('records.btn1')

6.本地缓存语言类别

切换语言类别，localStorage缓存语言类别，切换成功之后需要刷新一次网页，table头部字段需刷新浏览器才能显示切换后的对应语言字段

exchangeLang() {
      let isZh = localStorage.getItem('lang')
        ? localStorage.getItem('lang')
        : 'zh'
      if (isZh === 'zh') {
        localStorage.setItem('lang', 'en') // en表示英文，zh表示中文，可根据自己喜好设定，尽量通俗易懂
      } else {
        localStorage.setItem('lang', 'zh')
      }
      location.replace(location) //刷新网页
    },

由于项目使用了antdv（antdv国际化）组件，因此像date-picker这类工具需特殊处理
在App.vue文件中，需要引入对应语言包

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
export default {
  data() {
    return {
      locale: localStorage.getItem('lang') == 'en' ? enUS : zhCN,
    }
  }

7.报错

Cannot read properties of undefined (reading 'install')

----（可省略）先卸载原来的vue-i18n
指定安装vue-i18n的版本比如yarn add vue-i18n@8.9.0
再次运行即可

i18n官网明确了使用版本，vue2和vue3分别不一样，vue2使用8版本，vue3使用9版本，安装时需要注意版本号