vue+ vue-i18n实现前端语言国际化

1.先现在项目中安装vue-i18n的依赖

npm install vue-i18n --save

2.在src下建一个lang的文件夹,并且在其下面建一个index.js文件,然后在里面写如下代码

import Vue from "vue"; // 引入Vue
import VueI18n from "vue-i18n"; // 引入国际化的包
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en' //引入el自带得国际化语言包,防止内部插件出现乱码
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'//引入el自带得国际化语言包,防止内部插件出现乱码
Vue.use(VueI18n); // 全局注册国际化包


// 准备翻译的语言环境信息
const i18n = new VueI18n({
  locale: localStorage.getItem('locale')||"en", // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    'zh': Object.assign(require('./zh.js'), zhLocale) ,   // 中文语言包
    'en': Object.assign(require('./en.js'), enLocale) ,  // 英文语言包
    'ko': require('./ko.js'),    // 韩语文语言包
    'ru': require('./ru.js'),    // 俄语语言包
    'ja': require('./ja.js'),    // 日文语言包
    'fr': require('./fr.js')    // 法语语言包
  }
}); 

ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n

3.等待后端给了具体的语言包文件,之后,去配置lang下的其他文件目录结构如下

语言包内部示例如下:

/**zh.js文件**/
module.exports = {
 menu : {
   home:"首页"
 },
 content:{
   main:"这里是内容"
 }
}
 
/**en.js文件**/
module.exports = {
 menu : {
   home:"home"
 },
 content:{
   main:"this is content"
 }
}

 4.在main.js中引入vue-i18n并挂在到vue实例上

// 国际化
import i18n from "@/lang/index";
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI,{locale});
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

5.现在就可以使用了,使用示例如下

(1)在标签内作为正文内容
{{$t('menu.home')}}
 
(2)作为标签属性使用

切换语言的话,可以在需要的地方加一个下拉选择的按钮,通过事件去触发(如果你引入了全局el,对按按钮又没有特殊要求,可以直接采用我代码)

//布局
        
          
            切换语言
          
          
            中文/English
            中文/Français
            中文/한국어 공부 해 요
            中文/日本語
            中文/русский язык
          
        

//js部分

methods:{
    // 切换语言
    handleCommand(command) {
      // console.log(command)
      this.$i18n.locale = command;
      localStorage.setItem('locale',command)
    },
}