Vue项目利用 i8n 实现国际化

Vue项目实现国际化

一：自己配置 i18n 完成国际化

• 1、创建项目，在项目中安装 vue-i18n

	vue cerate vue_i18n
    yarn add vue-i18n

• 2、在main.js中引入组件并且注册

	import VueI18n from 'vue-i18n'		//引入vue-i18n组件
 
    Vue.use(VueI18n)		//use一下
 
    //注册i8n实例并引入语言文件
    const i18n = new VueI18n({
    	locale: 'zh',		//默认显示的语言 可以使用sessionStorage.getItem('lang') || 'zh',
        messages: {
        	'zh':require('./assets/locales/zh'),	//索引语言文件
    		'en':require('./assets/locales/en')
        },
        silentTranslationWarn: true		//禁止打印警告信息
    })

• 3、在new Vue 中添加 i18n

	new Vue({
  		router,
 		 i18n,
  		render: h => h(App)
	}).$mount('#app')

• 4、配置语言文件（文件有两种格式可以选择.js和.json）

  • 1、.js的方式

  	module.exports = {
  		language: {
  			zh:'中文',
  			en:'英文',
  		},
  		navbar: {
  			home: '首页',
  			introduction: '简介',
  			contact: '联系我们',
  			jing_product_name: '金融服务',
  			jing_product_toast_msg: '开发中，敬请期待'
  		}
  	}
  

  • 2、.json的方式

  {
  	"language": {
  		"en": "英文",
  			"zh": "中文"
   	},
  	"message": "你好 i18n !!"
  }
  

• 5、事件绑定，进行中英文切换

  • 1、在vue组件中进行事件绑定

  <button @click="changeLangue('zh')">{{$t('language.zh')}}</button>
  <button @click="changeLangue('en')">{{$t('language.en')}}</button>
  

  • 2、在methods的生命周期中进行切换

  	changeLangue(lang){
      	if(lang === 'zh'){
          	sessionStorage.setItem("lang","zh");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //这里可以加上路由刷新，看自己的需求
              this.$router.go(0)
          }else if (lang ==='en') {
          	sessionStorage.setItem("lang","en");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //这里可以加上路由刷新，看自己的需求
              this.$router.go(0)
          }
      }
  

二：使用i18n提供的方法用vue-cli来快速搭建环境

• 1、创建项目，在项目中安装 vue-i18n

	vue create vue_i18n
    cd vue_i18n
    vue add i18n

• 2、浏览一下自动创建主要生成的目录和文件

  • 1、 locales文件夹，该文件夹里面有一个默认的语言文件en.json

  • 2、 i18n.js文件，该文件主要是i18n的配置信息

  • 3、 在main.js的 new Vue中也为我们自动添加了 i8n

  • 4、 vue.config.js 不做解释

• 3、对i18n.js的理解

  • 1、该文件主要是对i18n做了统一整理和管理

  export default new VueI18n({
  	locale: process.env.VUE_APP_I18N_LOCALE || 'en',	//设置页面的默认语言
      	// process.env.VUE_APP_I18N_LOCALE 默认是英语显示，我们要修改它为自定义
          // 可以通过sessionStorage.getItem('lang') 的方式
          // locale: sessionStorage.getItem('lang') || 'en'
  	fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',		//可以理解为第二语言
  	messages: loadLocaleMessages()		//加载的语言文件，我们不需要修改，在上面已经为我们自动创建好了
  })
  

• 4、实现中英文切换

  • 1、在vue组件中进行事件绑定

  <button @click="changeLangue('zh')">{{$t('language.zh')}}</button>
  <button @click="changeLangue('en')">{{$t('language.en')}}</button>
  

  • 2、在methods的生命周期中进行切换

  	changeLangue(lang){
      	if(lang === 'zh'){
          	sessionStorage.setItem("lang","zh");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //这里可以加上路由刷新，看自己的需求， 单独的语言文件时需要重载路由才能显示的
              this.$router.go(0)
          }else if (lang ==='en') {
          	sessionStorage.setItem("lang","en");
              this.$i18n.locale = sessionStorage.getItem("lang");
              //这里可以加上路由刷新，看自己的需求， 单独的语言文件时需要重载路由才能显示的
              this.$router.go(0)
          }
      }
  

• 5、自动构建工具是使用vue-cli-plugin-i18n来就完成的

  • 惊喜

    • 在组件中，我们得到了一个<i18n></i18n>的标签，在该标签中我们可以使用json格式来直接编辑语言文件

    {
    	"en": {
    		"hello": "Hello i18n in SFC!"
    },
    	"zh":{
    		"hello": "你好 i18n in SFC!"
    	}
    }
    

  • 在vue组件中的语言配置，和在单独文件中配置有何异同

    • 1、在vue组件中直接配置语言文件，更加直观
    • 2、在vue组件中的配置比加载单独文件迅速
    • 3、我不知道了，欢迎各位补充

• 6、必要说明

  • 1、以上为个人观点，可能会用不足
  • 2、有错误的地方希望指正，谢谢