vue项目支持多语言(vue-i18n)

Posted 1156184981651a

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目支持多语言(vue-i18n)相关的知识,希望对你有一定的参考价值。

引入vue-i18n

vue-i18n 是一个vue插件,主要作用就是让项目支持国际化多语言。首先我们引入这个插件:

import Vue from vueimport Vue18n from vue-i18n‘

Vue.use(Vuei18n);

vue插件的使用方法,通过全局方法Vue.use()使用插件。

插件通常会为Vue添加全局功能。插件的范围没有限制-一般有下面几种:添加全局方法或者属性;添加全局资源;指令/过滤器/过渡等;通过全局mixin方法添加一些组件选项;添加Vue实例方法,通过把它们添加到Vue.prototype上实现。

Vue.js的插件应当有一个公开方法install,通过代码可以更直观的看出插件提供的功能:

//1 添加全局方法或者属性
Vue.myGlobalMethod=function(){}

//2 添加全局资源
Vue.directive(‘my-directive‘,{

bind(el,binding,vnode,oldVnode){}

});

//3 注入组件
Vue.mixin({

created(){}

});

//4 添加实例发方法
Vue.prototype.$myMethods=function(methodOptions){}

使用vue-i18n

<div id="app">{{$t("message.hello")}}</div>

import Vue from ‘vue‘
import VueI18n from ‘vue-i18n‘
const messages={   en:{message:{hello:‘hello world‘}},   cn:{message:{hello:‘您好世界‘}} }; const i18n=new VueI18n({   locale:‘en‘,   messages:messages }); new Vue({i18n}).$mount("#app");

//output

<div id="app">hello world</div>

可以看到,我们再实例化Vue的时候,将i18n当作一个options传了进去。之后我们就可以在vue的组件里使用i18n了,使用方法主要是两种:

1 在组件的template中,使用$t()方法

2 在组件的script中,使用this.$i18n.$t()

添加locales文件夹

messages是一个包含了多语言的对象,它就像哦我们的字典。可以新建一个locales文件夹,存放作于跟我们语言相关的代码。目前包含三个文件:index.js en.js cn.js

en.js 和cn.js是我们的语言包,是一个json形式。

index.js

import Vue form ‘vue‘
import VueI18n from ‘vue-i18n‘
import EN from ‘./en.js‘
import CN from ‘./cn.js‘
const DEFAULT_LANG=‘cn‘; const LOCALE_KEY=‘localeLanguage‘; const locales={   en:EN,   cn:CN }; const i18n=new VueI18n({   locale:DEFAULT_LANG,   messages:locales });
export const setup
=(lang)=>{   if(lang==undefiend){     lang=window.getStorage(LOCALE_KEY)     if(locales[lang]==undefined){lang=DEFAULT_LANG}   }   window.localstorage.setItem(LOCALE_KEY,lang);   Object.keys(locales).forEach(function(lang){   document.body.classList.remove(`lang-${lang}`);   });   document.body.classList.add(`lang-${lang}`);   document.body.setAttribute(‘lang‘,lang);   i18n.locale=lange;   Vue.config.lang=lang;  } setup(); export default I18n;

我们对外提供一个setup的方法,给使用者修改当前使用语种的能力。同时,我们在setup里还做了三件事:

将当前语种存在localStorage中,保存用户的使用习惯;给body添加语种相关的class,因为不同语言可能导致排版出现差异,我们还需要配置,将当前语种存在

Vue的全局配置中,以便未来可能的使用。

最后在main.js中引入这个index.js就可以了

import Vue from ‘vue’
import App from ‘./app.vue‘
import router from ‘./router‘
import store from ‘./store‘
...
import i18n from ‘@/locales‘

new Vue({router,store,i18n,render:h=>h(App)}).$mount(‘#app‘);

vue实例外的js代码中的额文本怎么替换?
vue实例中我们可以使用this.$i18n.t,这里的this是vue的实例,那项目中的很多js代码在vue的实例之外。最简单的方法就是咋需要

使用的地方手动直接import i18n

这样在vue实例中使用this.$i18n.t,如果不是就先import ,使用i18n.t,这样显然复杂了。

为了解决这个问题,最直接的办法就是把i18n直接挂载在window下,变成全局变量。我们就不需要import了,直接使用i18n.t就可以了;

在main.js:

import Vue from ‘vue‘

import App from ‘./app.vue‘
import store from ‘./store‘
import router from ‘./router‘
...
import i18n from ‘@crm/locales‘
...

window.i18n = i18n

new Vue({
  i18n,
  router,
  store,
  render: h => h(App),
}).$mount(‘#app‘)

然而我们将组件中的import i18n全去掉,并将this.$i18n.t改成i18n.t.项目跑起来之后就报错了:i18n is not defined

显然是组件在调用i18n的时候,i18n还没有挂载到window上,所以执行顺序出了问题:

//假设webpack的入口文件是```main.js```
 
//main.js
import moduleA from ‘moduleA‘
console.log(1)
 
import moduleB from ‘moduleB‘
console.log(2)
 
//moduleA.js
console.log(3)
 
//moduleB.js
console.log(4)
 
//最终在浏览器中打印出的数字顺序是: 
3
4
1
2

跟ES6 module的机制有关系。import命令具有提升效果,会提升到整个模块的头部,首先执行,这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。

这样我们就找到之前报错的原因了,我们先import app router这些视图,然后import i18n并挂载在window,所有组件的script中的代码都先执行,而此时i18n挂载到

window的代码还没有执行。import中的script代码执行完之后才到main.js中其他的js代码,我们首先将window.i18n=i18n移到locales/index中,然后调整main.js中的import的顺序:

//locales/index
...
setup()
window.i18n = i18n

export default i18n

//main.js
import Vue from ‘vue‘

import i18n from ‘@crm/locales‘
import App from ‘./app.vue‘
import store from ‘./store‘
import router from ‘./router‘
...

 

 

参考:http://www.totozhan.com/

以上是关于vue项目支持多语言(vue-i18n)的主要内容,如果未能解决你的问题,请参考以下文章

vue项目国际化(多语言)

VUE+webpack+npm项目中的多语言vue-i18n@8.x

vue-i18n 多语言开发

vue-i18n 多语言开发

vue 多语言 vue-i18n 按需加载,异步调用

Vue-i18n多语言搭配vuex的混合使用-案例