vue+element-ui使用vue-i18n进行国际化 js文件单独使用i18n

vue+element-ui使用vue-i18n进行国际化 js文件单独使用i18n

①下载依赖-----vue2项目安装8.xx版本或更早的版本，vue3项目安装9.xx或更新的版本

npm install vue-i18n -save

②新建language文件夹(名称可自拟)

与main.js平级，在该文件夹下添加index.js、zh.js、en.js，如下图所示。index.js文件是国际化的配置导出文件，zh.js是自定义的中文语言包，en.js是自定义的英文语言包，需要其他语种的只需新建语言包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvS9ftZu-1685423281273)(C:\Users\cheng\AppData\Roaming\Typora\typora-user-images\image-20230329144316614.png)]

③在index.js文件下引入自定义的语言包和element-ui的语言包，进行vue-i8n的配置并默认导出

import Vue from "vue";
import VueI18n from "vue-i18n";
//引入自定义语言配置  
import zh from './zh';//语言包定义的位置，前文写在同一文件夹下，可自行修改位置
import en from './en';
//引入UI框架语言配置---elementui
import locale from 'element-ui/lib/locale';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || "zh",//将语言标识存入localStorage或sessionStorage中，页面刷新不会默认中文显示
  messages: {
    'zh': {
      ...zh,
      ...zhLocale
    },   // 中文语言包
    'en': {
      ...en,
      ...enLocale
    }   //英文语言包
  },
  silentTranslationWarn:true//解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
});

//vue-i18n版本为6.xx或更新的版本书写方式如下，5.xx版本请以element-ui国际化为准，建议使用8.xx版本
locale.i18n(function (path, options) {
  let value = i18n.t(path, options)
  if (value !== null && value !== undefined) {
    return value
  }
  return ''
})

export default i18n;

④配置相应的语言包

//en.js如下
export default {//英文
    msg:{
        msg1:'msg',
        数据1:'data1',
        数据2:'data2'
    }
}

//zh.js如下
export default {//中文
    msg:{
        msg1:'消息',
        数据1:'数据1',
        数据2:'数据2'
    }
}

⑤在main.js中引入i8n

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import i18n from './language'//i18n引入

Vue.prototype.$echarts = echarts

Vue.config.productionTip = false
Vue.use(VCharts)
Vue.use(ElementUI,{locale})

new Vue({
  el: '#app',
  i18n,//i18n挂载
  router,
  render: h => h(App),
})

⑥页面使用，使用i8n提供的$t函数进行替换

在标签使用，直接替换标签中的文字，element-ui组件中的lable、placeholder等也是同样的方式

<div>{{$t('msg.msg1')}}</div>
<el-input :placeholder="$t('msg.msg1')"></el-input>

js标签中使用，挂载在vue实例上，使用this.$t进行替换

<script>
    message：this.$t('msg.msg1')
</script>

如果要对后台返回的数据进行语言切换，可采用如下方式，前提是**后台返回数据文字部分基本不变，前端可提前知道具体数据**，内容较多或数据不确定时不适用。

<!-- 页面渲染，数据使用方法进行替换  -->
<div v-for="item,i in message" :key="i">{{dataSwitch(item)}}</div>



<script>
    export default{
        //如果拿到的后台数据如下
        message:{
            one:'数据1',
            two:'数据2',
            ...
        }
            
            
        //处理方法---在methods里定义替换的方法 并将数据添加到自定义的语言包中,步骤4已给出，此处数据的key         值必须是页面渲染的值，否则无法识别
        methods:{
            dataSwitch(item) {
               if(this.$te(`msg.${item}`)) {
                   return this.$t(`msg.${item}`)
               }
               return item
            }
        } 
    }
</script>

⑦存储语言标识，在页面上进行中英文切换，只有两种语言切换时可用，语种较多时，请使用下拉选择。

<template>
    <div>
        <span v-if="lang === 'zh'" @click="zhToen">中</span>
        <span v-else @click="zhToen">英</span>
    </div>
</template>
<script>
    export default{
        methods:{
            zhToen() {
                if (this.lang === 'zh') {
                    localStorage.setItem('lang', 'en')
                    this.$i18n.locale = 'en'
                }
                if (this.lang === 'en') {
                    this.$i18n.locale = 'zh'
                    localStorage.setItem('lang', 'zh')
                }
                this.lang = localStorage.getItem('lang')
            }
        }
    }
</script>

⑧在单独的js文件中使用this.$t函数会出错，因为js文件的this指向的是Windows对象，前面已经说过了，t这个函数是由i18n提供的，挂载在vue上，所以vue文件中使用this.$t，而在js文件中，只需要直接引用i18n，调用它自带的t方法即可，例句代码如下

import i18n from '' //具体路径根据自己的代码结构判断
const obj = {
    id:i18n.t('msg.msg1')
}
export default obj

运行后发现新的问题，更改语言后，它不会自动刷新，必须重新编译，排查问题后得出：obj是一般属性，改成函数的形式即可跟随切换，例句代码如下

import i18n from '' //具体路径根据自己的代码结构判断
const obj = () => {
    id:i18n.t('msg.msg1')
}
export default obj