vue2中使用i18n配置elementUi切换语言
1、下载插件
npm i vue-i18n@8.22.22、新建文件夹i18n
3、编写index.js文件
import Vue from "vue";
import VueI18n from "vue-i18n";
import locale from 'element-ui/lib/locale';
// 引入 elementui 的多语言
import enLocale from 'element-ui/lib/locale/lang/en'
import zhCnLocale from 'element-ui/lib/locale/lang/zh-CN'
// 引入自己定义的 I18n 文件
import en from "./lan/en.json";
import zh from "./lan/zh.json";
Vue.use(VueI18n); // 全局挂载
export const i18n = new VueI18n({locale: localStorage.getItem("lang") || "zh", // 从localStorage中获取 默认英文messages: {zh: Object.assign(zh, zhCnLocale), // 中文语言包en: Object.assign(en, enLocale) // 英文语言包}
});
locale.i18n((key, value) => i18n.t(key, value));
export default i18n;
4、编写en.json文件和zh.json文件
5、修改main.js文件
import Vue from 'vue'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import { i18n } from './i18n/index'
new Vue({el: '#app',i18n,render: h => h(App)
})6、 页面显示的语法
<!-- 这个按钮方便我们用来切换语言 --><template> <div class="full" @click="changeLangEvent()"><span class="lan">{{language}}</span><h3 class="title">{{ $t('login.WelcomeToLogin') }}</h3></div></template><script>export default {
data (){return {language: localStorage.getItem("lang") ||"en"}},methods:{changeLangEvent() {if (this.language == "en") {this.$i18n.locale = 'zh';this.$message({message: "切换为中文！",type: "success"});localStorage.setItem("lang", "zh");this.language = "zh";} else if (this.language == "zh") {this.$i18n.locale = 'en';this.$message({message: "Switch to English!",type: "success"});localStorage.setItem("lang", "en");this.language = "en";}},}
</script>