前言

大家好，我是阿康。我们有些小伙伴可能在公司的时候会遇到国际化的问题，一般都是要求中英互译，今天就来讲讲国际化的大致流程，我们以elemntui中的插件为例子来进行说明

前期准备工作

1. 根据要求下载i18这个插件，命令行如何下：

npm install vue-i18n@x -s

安装结果如图所示:

2.创建一个文件夹en，一个是中文zh.js，一个是英文en.js,如图所示：

3.在main.js中引入我们定义好的文件，代码如下：

//引入中英文文件夹
import zh from '../src/en/zh';
import en from '../src/en/en';

引入插件
import VueI18n from 'vue-i18n'

//调用文件内容
Vue.use(VueI18n)
const messages = {zh, en}
const i18n = new VueI18n({
    messages,
    locale: navigator.language,//获取当前的语言模式，以此来进行中英文的转换
})

// 注册到实例化中
new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
    mounted() {
        document.dispatchEvent(new Event('render-event'))
    },
}).$mount("#app");

4.给中英文文件添加内容：

// 英文翻译
export default {
  //容器云产品族
  bocFamily:{
      family: 'BoCloud Container Cloud Product Family',
      fucan: 'Empowering Applications',
      stable: 'Higher delivery efficiency and stability',
      synergy: 'Simple management, lower costs & better efficiency',
      ContentDescribetop:'BoCloud container cloud product family is an application-centric and container-based cloud-native operating system supporting multi application types.',
      ContentDescribedown:'With container cloud, microservice application management, middleware management, AI app support and container security, we help enterprises improve app delivery efficiency, simplify app management, enjoy a stable operating environment, lower costs and better efficiency.',
            }
     }

// 中文翻译
export default {
    //容器云产品族
    bocFamily:{
        family:'博云容器云产品族',
        fucan:'为应用赋能',
        stable:'提升应用交付效率、增强应用稳定性',
        synergy:'简化管理，降本增效',
        ContentDescribetop:'博云容器云产品族是以应用为中心，以容器为底座，面向多种应用类型支撑的云原生操作系统。',
        ContentDescribedown:'产品族由容器云、微服务应用管理、中间件管理、AI应用支持、容器安全组成，可助力企业提升应用交付效率、简化应用管理、提供应用稳定的运行环境，达到降本增效目标。',
            }
        }

准备就绪开始使用，$t(xx)包裹字段key

<div class="toptitle">{{$t('bocFamily.family')}}</div>
<div class="titledec">{{$t('bocFamily.ContentDescribetop')}}</div>
<div class="titledec">{{$t('bocFamily.ContentDescribedown')}}</div>
<div class="imgdec">
  <img :src="baseURL.picAddr+bockinds.content_icon_url">
</div>

中文效果如下：

英文效果如下：

最后让我们来自由切换中英文

设置一个滑动按钮，根据需要进行转换

<!--           语言切换-->
            <div id="lanuage">
              <el-switch
                  v-model="language_value"
                  active-color="#13ce66"
                  inactive-color="#ff4949" @change="changeLange">
              </el-switch>
            </div>

//切换语言，语言子在初始化的时候默认是zh-CN,我们以en为其他语言
changeLange() {
  this.$i18n.locale = this.$i18n.locale == 'zh-CN' ? 'en' : 'zh-CN';
}

结语：希望对你有帮助哦