vuei18n中英文切换（前后端）

前端：

1、下载包

2、

src下建立如图所示文件夹及各文件。

• index.js

import VueI18n from 'vue-i18n'
import Vue from 'vue'


Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: window.localStorage.getItem('xxx-lang') || 'zh-CN',    // 语言标识
    messages: {
        'zh-CN': require('./lang/zh'),   // 中文语言包
        'en-US': require('./lang/en')    // 英文语言包
    },
    silentTranslationWarn: true
})

export default  i18n

• zh.js

export const pastrecord = {
  messages: {
    intro: '年化收益率',
    terminal: '定期',
    day: "天",
    max: '总额',
    button: '立即认购',
    past: '往期记录'
  },
}

• en.js

export const pastrecord = {
  messages: {
    intro: 'Rate of return',
    terminal: 'Periodical :',
    day: "Days",
    max: 'Total:',
    button: 'Subscription immediately',
    past: 'Past record'
  },
}

3、main.js  ↵

// 中英文切换

import i18n from '@/utils/i18n'

4、页面中

• 第一种方式：在data中：record: this.$t('pastrecord.messages') 。
• 第二种方式：直接在需要切换的地方{{$t("")}}.

后端：

首先需要后台需要传过来中英文字段（哈哈，废话~）

等会儿再写吧，累了。。。

更新：

点击按钮全局中英文状态改变

<button @click="changeLangEvent('en-US')">English</button>

 <button @click="changeLangEvent('zh-CN')">中文</button>

 

方法：changeLangEvent(n) {

      if (n == 'en-US') {

        localStorage.setItem('xxx-lang', n)

        this.$i18n.locale = n

      } else {

        localStorage.setItem('xxx-lang', n)

        this.$i18n.locale = n

      }

    },

获取后台英文用Headers的Accept-Language来标识

请求头：config.headers['Accept-Language'] = localStorage.getItem("xxx-lang" ) || ''

这样，可以在不同语言下请求到后台对应语言环境的值。

更新：又学到一种方法(js文件格式不一样)

zh.js

 Backstage: {

    '地址不存在': '地址不存在',

    '网络开了一点小差~': '网络开了一点小差(●\'◡\'●)',

}

en.js

Backstage: {

    '地址不存在': 'Address Inexistant',

    '网络开了一点小差~': 'Network crashed(●\'◡\'●)',

}

页面取法：this.$t(`grapefruit.Backstage.${error}`)   

==============================================================================================

前端中英文+后台返过来数据的写法

==========${this.$t('grapefruit.Dialog.send')}${v.message}！============

 

更新：

根据浏览器标识，获取浏览器的语言环境

main.js

Vue.use(VueI18n)

// 注册i18n实例并引入语言文件

let type = navigator.appName;

let lang

if (type == "Netscape") {

  lang = navigator.language;//获取浏览器配置语言，支持非IE浏览器

} else {

  lang = navigator.userLanguage;//获取浏览器配置语言，支持IE5+ == navigator.systemLanguage

};

lang = lang.indexOf('zh-CN') > -1 ? "zh-CN" : 'en-US'

let isHas = localStorage.getItem('xxx-lang')

lang = isHas || lang

console.log('lang: ', lang);

const i18n = new VueI18n({

  locale: lang,

  messages: {

  'zh-CN': require('./utils/i18n/lang/zh'),   // 中文语言包

  'en-US': require('./utils/i18n/lang/en')    // 英文语言包

},

})