vue中使用i18n

1、vue 安装国际化i18n

1 npm install vue-i18n --save
2 cnpm install vue-i18n --save (淘宝镜像安装)

2、创建文件

1. 创建lang文件夹
2. 创建index.js文件
3. 创建en-us.js文件
4. 创建zh-cn.js文件

index.js

import Vue from 'vue'
import iView from 'view-design'
import VueI18n from 'vue-i18n'
import zhCN from './zh-cn'
import enUS from './en-us'
// 引入iview的中英文翻译
import iviewZH from 'view-design/dist/locale/zh-CN'
import iviewEN from 'view-design/dist/locale/en-US'

Vue.use(VueI18n)
Vue.locale = () => {}

var locale = localStorage.getItem('lang')
export const i18n = new VueI18n({
  locale: locale,
  fallbackLocale: 'zh-CN',
  messages: { 'zh-CN': Object.assign(zhCN, iviewZH),
    'en-US': Object.assign(enUS, iviewEN) }, // 本地与iview国际结合
  silentTranslationWarn: process.NODE_ENV === 'production' // true 去除console中黄色报错
})

Vue.use(iView, {
  i18n: (key, value) => i18n.t(key, value)
})

// 切换中英文调用该方法
export function setI18nLanguage (lang) {
  i18n.locale = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

en-us.js

/**
 * 英文
 */
const lang = {
  message: 'Hello'
}
export default lang

zh-cn.js

const lang = {
  message: '你好'
}
export default lang

3、在main.js 中引入文件index.js文件

// 路径为你自己的文件路径
import { i18n } from '@/utils/lang'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

4、组件中使用

// 在需要的组件中引入切换的方法
import {setI18nLanguage} from '../../utils/lang/index'

 // 切换语言方法
 switchLanguage (lang) {
   setI18nLanguage(lang)
   // 将语言放入localStorage，在初始化语言时取出，从而刷新页面时，不会恢复初始语言
   localStorage.setItem('lang', lang)
 }

   // 标签内使用
   <Button type="primary">{{$t('message')}}</Button>
   // 标签属性中使用
   <FormItem :label="$t('message')"></FormItem>
   // js 中使用
   this.$t('message')