vue使用插件 vue-i18n

一、版本要求

vue2:：8版本

Vue3：9版本(默认)

二、安装插件

npm install --save vue-i18n

查看版本号

npm view vue-i18n version

 三、将需要翻译的语言统一处理

1.新建文件夹名为:i18n

2.zh.js文件写所有要切换为中文的参数值为中文(与en.js文件的参数呼应)

import zhLocale from 'element-ui/lib/locale/lang/en'

export default {
    "lang": "中文",

    //以下是需要切换的语言

    title:'我是标题啊',//I'm the title
    content:'内容',//content 

    ...zhLocale
}

3.en.js文件写所有要切换为英文的参数值为英文(与zh.js文件的参数呼应)

import enLocale from 'element-ui/lib/locale/lang/en'

export default {
    "lang": "English",

    //以下是需要切换的语言

    title:"I'm the title",//我是标题啊
    content:'content ',//内容

    ...enLocale
}

4.index.js文件统一封装

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const messages = {
    en: {
        ...en,
    },
    zh: {
        ...zh,
    }
};
const i18n = new VueI18n({
    locale: localStorage.lang || 'zh',
    messages,
});
locale.i18n((key, value) => i18n.t(key, value))
export default i18n;

四、main.js文件全局注册 

import Vue from 'vue'

//导入全局组件
import i18n from '../src/i18n/index'

//注册
new Vue({
  i18n,
  render: h => h(App)
})

五、使用方式 

1.切换标识

<template>
    <el-dropdown @command="langChange">
        <span class="el-dropdown-link register_contain"> 语言/language</span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="zh">中文</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
    </el-dropdown>
</template>
<script>
export default {
    methods: {

        // 中英文切换
        langChange(command) {

            this.$i18n.locale = command

            //数据存储,标识当下是zh(中文)还是en(英文)
            localStorage.setItem("lang", command)
            
            //如果切换语言，触发直接刷新页面(为的是element UI配置的切换)，看业务所需是否添加*
            window.location.reload()
        },
    },
}
</script>

界面

2.DOM中使用

title是zh.js与en.js文件中呼应的参数

    <!--    需要切换的语言变化-->
    <div style="margin-top: 100px">{{ $t('title') }}</div>

3.js中使用

text是data中变量

<!--    需要切换的语言变化-->
<div style="margin-top: 100px">text</div>

this.text = this.$t('title')

六、element UI组件切换语言 

1.main.js进行配置

import Vue from 'vue'


//导入全局组件
import i18n from '../src/i18n/index'



//element UI语言切换配置
import locale from '../node_modules/element-ui/lib/locale/lang/en'

import moment from 'moment'

moment.locale('zh-cn')

import ElementUI from 'element-ui'

const options = localStorage.getItem("lang") === 'en'?{ locale } : {};

Vue.use(ElementUI, options)



//注册
new Vue({
  i18n,
  render: h => h(App)
})

七、腾讯验证码语言切换 

添加{ userLanguage: 'en' }，userLanguage值为'zh',切换为中文，可以设一个变量根据localStorage.getItem("lang")作为变量的值

new TencentCaptcha('20********', function (res) {}, { userLanguage: 'en' })

效果： 

中文

英文