在掘金社区发布文章，并在正文的第一句加入“我正在参加「掘金·启航计划」”

写在前面:最近公司有一个后台管理项目,有需要增加多语言设置的需求,于是去了解了一下element ui官网提到的i18n方案,并简单实践一下,做如下记录.

ElementUI国际化

国际化方案: vue-i18n,

版本区别vue-i18n@5以及vue-i18n@6的区别

确认vue-i18n版本

// package.json 
"vue-i18n": "^8.26.7",

运行cmd命令 npm install vue-i18n@8.26.7安装指定版本

1. 引入国际化依赖

// lang/index.js(创建模块化管理的文件)
import Vue from 'vue';
import VueI18n from 'vue-i18n';

import zh from './zh' // 管理中文
import en from './en' // 管理英文

Vue.use(VueI18n);

const messages = {
    en,
    zh,
};
const i18n = new VueI18n({
  locale: 'zh', // set locale
  messages // set locale messages
});

export default i18n;

2. 多语言内容设置

// zh/index.js
export default{
    index:{
        title:"标题测试",
        desc:"内容内容测试",
    }
}


// en/index.js
export default{
    index:{
        title:"title",
        desc:"title-desc",
    }
}

3.main文件引入依赖

// main.js
import Vue from "vue";
import App from "./App.vue";

.....

// 国际化
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import i18n from "./lang";

....

Vue.config.productionTip = false;


Vue.use(ElementUI)
new Vue({
  i18n,
  render: (h) => h(App),
}).$mount("#app");

4.模板中引入

// template

    <el-button type="primary" @click="changeLanguage('zh')">语言切换zh</el-button>
    <el-button type="primary" @click="changeLanguage('en')">语言切换en</el-button>
<li><a target="_blank" rel="noopener">{{ $t('index.title') }}</a></li>
<li><a target="_blank" rel="noopener">{{ $t('index.desc') }}</a></li>


// script

methods:{
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
}

因为项目已经开发了一部分功能,所以关于多语言的管理可以通过页面分割的方式来管理,每个页面一个对象属性,以及全局组件单独抽离(如message组件),通过多个文件进行配置,然后export+import的形式进行模块化管理.

以上可以实现最基本的国际化项目语言切换需求,还有两点是关于默认语言的缓存以及接口数据的同步两个问题

5. 缓存记录用户系统的偏向语言,原理是缓存在sessionStorage或者locationStorage中,进入系统时先读取一下记录,同时也可以防止用户切换语言之后,刷新页面又回到默认语言的问题,简单改写一下change方法即可

// template
    <el-button type="primary" @click="toggleText('zh')">语言切换zh</el-button>
    <el-button type="primary" @click="toggleText('en')">语言切换en</el-button>
    <el-button type="primary">{{ $t('index.title') }}</el-button>
    
    
// script
  mounted() {
    this.changeLanguage() // 每次刷新页面之后自动修改一次语言
  },
  methods: {
    // 用户手动切换语言
    toggleText(setLang) {
      localStorage.setItem("language", setLang);
      this.changeLanguage()
      // location.reload()  // 有些组件存在不刷新的行为,更换语言后替用户刷新一下页面
    },
    // 获取缓存中最新的语言类型并设置
    changeLanguage() {
      const curLang = localStorage.getItem("language");
      this.$i18n.locale = curLang;
    }
  }

6. 关于接口数据

可以在请求拦截器告诉后端,要获取的接口数据是中文还是英文类型,把本地缓存的标识携带上即可,需跟后端和产品沟通.

7. 关于权限菜单栏的

左侧控制菜单的权限由后端控制,那前端可能需要封装一个转换函数,且本地有个路由表用来对应,待商讨.