使用Vue-i18n实现国际化中英文切换

先安装依赖

npm install vue-i18n

创建文件

在根目录新建i18n文件

在main.js中引入i18n

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

配置i18n的index.js文件

import VueI18n from 'vue-i18n'; import Vue from 'vue'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: sessionStorage.getItem('lang') || 'cn', messages: { 'cn': require('./langs/cn'), 'en': require('./langs/en') }, }); export default i18n;

配置i18n的cn.js文件

module.exports = { message: { home: '首页', language: '语言', } };

配置i18n的en.js文件

module.exports = { message: { home: 'Home', language: 'language', } };

在HTML页面使用,其他模板语法参考官方文档

<span>{{$t('message.home')}}</span>

这里是为了实现点击选择语言切换，所以绑定了事件，点击就可以实现配好的中英文切换了

changeLang(lang) { // 会话未关闭前保留选中的语言 window.sessionStorage.setItem("lang",lang); this.$i18n.locale = lang; }

有个需求是：html引用的字段在没有英文或者其他语言配置的时候，默认显示中文（切换语言有翻译就翻译，没翻译就显示中文）

可以在index.js文件添加 fallbackLocale: ‘cn’, silentFallbackWarn: true,

const i18n = new VueI18n({ locale: sessionStorage.getItem('lang') || 'cn', // 回退本地化 fallbackLocale: 'cn', silentFallbackWarn: true, formatFallbackMessages: true, messages: { 'cn': require('./langs/cn'), 'en': require('./langs/en') }, });