vue2项目使用i18n进行中英文切换

vue+element 使用i18n进行中英文切换

---

前言

最近公司一个项目需要给海外用户使用，需要做中英文切换网站，目前只嵌入中文和英文

---

一、下载vue-i18n插件

npm install vue-i18n

二、定义中英文两套js文件，配置i18n，并在main.js中引入

此处需要使用中文和英文两种语言，新建一个文件夹存放en.js和zh.js两个语言文件

1.en.js

import enLocale from 'element-ui/lib/locale/lang/en'
export default {
  "lang": "English",
  // 菜单
  "menu": {
    "media": "media",//媒体
    "data": "data",//数据
    "docking": "docking",//对接
  },
  ...enLocale
}

2.zh.js

import zhLocale from 'element-ui/lib/locale/lang/en'
export default {
  "lang": "中文",
  // 菜单
  "menu": {
    "media": "媒体",//媒体
    "data": "数据",//数据
    "docking": "对接",//对接
    "operator": "当前操作账号：",//当前操作账号
  },
  ...zhLocale
}

注：zh.js和en.js引入zhLocale和enLocale，是为了使element-ui组件也进行中英文切换
3.index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const messages = {
  en: {
    ...en,
  },
  zh: {
    ...zh,
  }
};
const i18n = new VueI18n({
  locale: localStorage.lang || 'zh',
  messages,
});
locale.i18n((key, value) => i18n.t(key, value))
export default i18n;

4.mian.js

import i18n from '@/i18n/index'
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

三、通过点击事件切换语言

<el-dropdown class="lang" trigger="click" @command="langChange">
    <span class="el-dropdown-link">
        {{language}} <i class="el-icon-caret-bottom"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item divided  command="zh">中文</el-dropdown-item>
        <el-dropdown-item divided  command="en">English</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

// 中英文切换
langChange(command) {
    this.$i18n.locale = command
    localStorage.setItem("lang", command)
    if(command == 'en') {
        this.language = 'English'
    } else if (command == 'zh') {
        this.language = '中文'
    }
},

四、i18n使用–数据渲染

1.dom中使用

<el-input :placeholder="$t('menu.media')"  v-model="name">
    <el-button>{{$t('menu.media')}}</el-button>
</el-input>

2、js中使用

handleView(index, row) {
    this.title = this.$t('common.lookApp')
}

3、filter过滤器中使用
(filter中不能使用this，所以可以传入$i18n，或者可以在外部定义that=this)

<el-table-column :label="$t('menu.media')" align="center">
    <template slot-scope="scope">
        {{scope.row.status_info.status | filterStatus($i18n)}}
    </template>
</el-table-column>  

<script>
    export default {
        filters:{
            filterStatus(status, type) {
            let str = ""
            switch(status) {
                case 1 :
                str = type.t('status.checkPending');
                break;
                case 2 :
                str = type.t('status.approved');
                break;
                case 3 :
                str = type.t('status.rejected');
                break;
            }
            return str;
            },
        },
    }
</script>

4、 rules中使用（可以在computed中定义）

computed: {
    rules() {
        return {
            name: [
                { required: true, message: this.$t('required.name'), trigger: 'blur' }
            ],
        }
    }
}

五、最终效果

中文：

英文：

---

注意事项（重要！！！）

当时我的项目是vue2版本的，我在安装i18n插件的时候，使用总是出错，正常引入，在Vue.use时就会报错

查了资料，问了大佬才知道，i18n官网明确了使用版本，vue2和vue3分别不一样,vue2使用8版本，vue3使用9版本，这个坑啊，我一安装就是高版本，vue2承担不起啊！后来改成正确版本号就能正常运行了。