[JavaScript知识库]Jeecg 结合Vue-i8n国际化双语配置

在 Vue 中使用 vue-i18n，配套双语

1 安装 vue-i18n

Javascript

npm install vue-i18n

2 配置文件

在 src 目录下新建一个 i18n 文件夹，在 i18n 文件夹里分别创建 i18n.js、langs 文件夹，在 langs 文件夹下面创建你的语言文件（cn.js/en.js/ja.js）和 index.js 文件

结构

3 i18n.js

Javascript

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
export default i18n

4 index.js

Javascript

import en from './en'
import cn from './cn'
import ja from './ja'
export default {
  en,
  cn,
  ja
}

5 cn.js

Javascript

const cn = {
  message: {
    hello: '你好'
  }
}

export default cn

6 en.js

Javascript

const en = {
  message: {
    hello: 'hello'
  }
}

export default en

在配置语言包的时候，key 值一定要保持统一，因为 i18n 是通过你的 key 值来切换语言的，如果 key 值有误，就不能正确的切换语言包，这一点千万要注意

7 引用 main.js

Javascript

import Vue from 'vue'
import App from './App'
import i18n from './i18n/i18n'

new Vue({
  el: '#app',
  i18n, //加上i18n
  components: { App },
  template: '<App/>'
})

配置页面

HTML 部分

Html

<p>{{$t('message.hello')}}</p>
//此时应该是中文
<button @click="switchLang('en')">英语</button>
<button @click="switchLang('cn')">中文</button>
<button @click="switchLang('ja')">日语</button>

Js 部分

Javascript

methods:{
    switchLang(lang)  {
        this.$i18n.locale = lang
        //把语言保存在localStorage中
        localStorage.setItem('lang',lang);
    }
  },

这样可以正常使用了

==========

以上引用自：https://www.jsopy.com/2019/11/12/vuecha1/

以下配置是合并? Jeecg? Ant Design of vue?的双语配置，实现jeecg内置页码，时间组件的英文版

找到 App.vue 文件

1. 在 #app 外层加上???<a-config-provider?:locale="locale">

2.引入系统自带的语言文件。说明，此处的文件不需要自己编写，是系统带的，也看不到lib文件夹。node_modules 文件自动有。

3.在created（）{} 中，将我们自己编写的语言状态同步赋给系统内置即可。代码如下：

<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'

  import enquireScreen from '@/utils/device'
 
  export default {
    data () {
      return {
        locale: zhCN,
      }
    },
    created () {

        //获取本地缓存中的语言配置并赋给系统
        // zhCN,enUS 是jeecg内置默认的中英语言，涉及页码时间等系统双语显示
        // cn,en 是我们自定义用于页面文档的中英语言
      if( localStorage.lang == 'cn'){ 
          this.locale =  zhCN
      } else if(localStorage.lang == 'en'){ 
          this.locale = enUS
      }


      let that = this
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })
    }
  }
</script>
<style>
  #app {
    height: 100%;
  }
</style>

?

?