vue中实现前端语言国际化i18n

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

1	npm install vue-i18n --save

在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)   // 英文语言包
 
  }
}); 
 
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n

lang文件夹下面建en.js和zh.js文件，语言包内部示例如下

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

在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");

在页面中使用示例如下

(1)在标签内作为正文内容
<div class="title">{{$t('menu.home')}}</div>
 
(2)作为标签属性使用
<input :placeholder="$t('content.main')" type="text">

切换语言

        <el-dropdown szie="mini" class="changeLang" @command="handleCommand">
          <span>
            切换语言<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item command="en">English</el-dropdown-item>
            <el-dropdown-item command="zh">中文简体</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
 

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