国际化基础应用-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyangzxc123/article/details/121575086

本文详细介绍了如何通过Yarn安装Vue-i18n库，配置多语言环境，并将其与Element UI集成，同时展示了如何在Vue组件中使用和切换语言，以及如何通过js-cookie处理页面刷新时的国际化状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装

yarn add vue-i18n

2.创建js并导入

import Vuei18n from 'vue-i18n'

3.实例化

import Vue from 'vue'
Vue.use(Vuei18n)

4.定义

const i18n = new Vuei18n({
     locale:'en',
     messages:{
         en:{
             xxxx:'hello'
         },
         zh:{
             xxxx:'你好'
         }
     }
})

5.暴露出去

export default i18n

6..main.js中导入

import i18n from '@/lang/index'

7.挂载

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

8.使用

<template>
  <div>首页
    {{ $t('xxx') }}
    <button @click="fnclick">按钮</button>
  </div>
</template>
<script>
export default {
  methods: {
    fnclick() {
      const a = ['en', 'zh']
      const b = a.indexOf(this.$i18n.locale)
      this.$i18n.locale = a[1 - b]
      this.$router.go(0)
    }
  }
}
</script>

element-ul中使用

1.找到main.js

// 如果想要中文版 element-ui，按如下方式声明
// 默认Vue.use(ElementUI)


// 修改
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

2.定义国际化的js文件中

import elemEn from 'element-ui/lib/locale/lang/en'
import elemzh from 'element-ui/lib/locale/lang/zh-CN'


const i18n = new Vuei18n({
  locale:'en',
  messages: {
    en: {
      xxx: 'hello',
      ...elemEn,
    },
    zh: {
      xxx: '你好',
      ...elemzh,
    }
  }
})

export default i18n

3.避免刷新页面丢失国际化效果.

1.安装
yarn add js-cookie
2.导入
import cookiejs from 'js-cookie'
3.使用
cookiejs.get 存
cookiejs.set 取
cookiejs.remove 删

备注:

如果不想体验太差.可以把刷新当前页面.改为静默刷新的方式处理..