准备工作

安装 npm install vue-i18n –save

我的版本

src文件下的新建文件目录结构

cn.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包//需要转换的中文const cn = {message: {info: {userinfo: '用户信息'},table: {item_number: "项目编号"}},...zhLocale}export default cn;

en.js

import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包//中文对应的英文const en = {message: {info: {userinfo: 'userinfo'},table: {item_number: "item number"}},...enLocale}export default en;

index.js

//导入两个文件import en from './en';import cn from './cn';export default {en: en,cn: cn}

i18n.js

import Vue from 'vue'import locale from 'element-ui/lib/locale';import VueI18n from 'vue-i18n'import messages from './langs'Vue.use(VueI18n)//从localStorage获取语言选择。const i18n = new VueI18n({locale: localStorage.lang || 'cn', //初始未选择默认 cn 中文messages,})locale.i18n((key, value) => i18n.t(key, value)) //兼容elementexport default i18n;

需要在main.js中引入并挂载

import i18n from './i18n/i18n';new Vue({router,store,i18n, //很重要，别忘记render: h => h(App)}).$mount('#app')

i18n组件

<template><div><el-select v-model="selectValue" @change="langChange" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></template><script>export default {data() {return {selectValue: "",options: [{value: "cn",label: "中文",},{value: "en",label: "English",},],};},created() {let that = this;console.log(localStorage.lang);that.selectValue =localStorage.lang == undefined ? "cn" : localStorage.lang;},methods: {//语言切换langChange(e) {// console.log(e)localStorage.setItem("lang", e);this.$i18n.locale = e;},},};</script>