vue插件集合21：vue i18n做国际化切换中英文

1：安装需要的插件

npm install vue-i18n
npm install js-cookie

2：创建多语言的文件夹和js文件

我是在src下创建了lang级目录，然后新建了zh.js，en.js，lang.js 三个js文件
lang.js文件内容

export default {
	setLang(lang) {
		window.localStorage.setItem('language', lang)
	},
	getLang(defaultLang) {
		let localLang = window.localStorage.getItem('language');
		if (localLang === 'null' || localLang === '' || localLang === 'undefined' || localLang === null || localLang === undefined) {
			return defaultLang
		} else {
			return localLang
		}
	}
}

en.js文件内容

module.exports = {
  language: {
    name: '中文'
  },
  navbar: {
    home: 'home',
    introduction: 'introduction',
    contact: 'contact'
  }
}

zh.js文件内容

module.exports = {
  
  language: {
    name: 'English'
  },
  navbar: {
    home: '首页',
    introduction: '简介',
    contact: '联系我们'
  }
}

3：在main.js中引入并使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 中英文
import LangStorage from './lang/lang.js'
// 使用多文件管理不同的语言是一个好习惯：
const i18n = new VueI18n({
	locale: LangStorage.getLang('zh'), / 语言标识，后面会用做切换和将用户习惯存储到本地浏览器
	messages: {
		'zh': require('./lang/zh'),
		'en': require('./lang/en')
	}
})
new Vue({
   i18n,
})

5、在vue组件中使用i18n

//内容中的 中英文切换
<p>{{ $t('navbar.contact') }}</p>
// 表单中的中英文切换
<input type="text" value="" id='name' :placeholder="$t('navbar.contact')" />
// 提示信息中的文字
this.$toast(this.$t('navbar.contact'));

即可以显示zh.js中的contact，之所以是zh，这是main.js中初始化时的默认语言配置。

6、更换语言

在需要改变语言的地方添加 import LangStorage from ‘./…/lang.js’

import LangStorage from './../lang.js'
<p @click="changeLocale">切换</p>
//methods:中的方法
changeLocale() {
  let locale = this.$i18n.locale
  locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
  LangStorage.setLang(this.$i18n.locale) // 保存用户习惯
}