基于vue.js，结合vue-i18n、ElementUI项目可以实现中/英文切换，方法如下： 1、安装`yarn add vue-i18n` > vue+vue-i18n国际化 > 在`assents/languages/`目录下新建`en_us.json、zh_cn.json`两个文件，内容格式如下： ``` assents/languages/en_us.json { "common": { ... "home": "Home", "login": "Login", "logout": "Logout", "myMsg": "My Message", ... } }, ``` assents/languages/zh\_cn.json ``` { "common": { ... "home": "首页", "login": "登录", "logout": "退出", "myMsg": "我的消息", ... } }, ``` ``` i18n.js import Vue from "vue"; import VueI18n from "vue-i18n"; Vue.use(VueI18n); // 注册i18n实例并引入语言文件，文件格式等下解析 const i18n = new VueI18n({ locale: "zh_cn", messages: { zh_cn: require("@/assets/languages/zh_cn.json"), en_us:require("@/assets/languages/en_us.json") } }); // 为了实现element插件的多语言切换 locale.i18n((key, value) => i18n.t(key, value)); export default i18n; ``` >[info] main.js添加下面代码 ``` import i18n from './i18n' ... const vm = new Vue({ el: '#app', i18n, render: h => h(app) }) ... ``` >[info] 界面引用 ``` $t('home.operation') ``` >[info] 实现语言切换 ``` // 语言切换 changeLanguage (lang) { const _lang = lang === '' ? 'zh_cn' : lang this.$i18n.locale = _lang } ```