1. Installation and Configuration
-Install $ npm install vue-i18n
or:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言
silentFallbackWarn: true,//抑制警告
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})
window.vm = new Vue({
el: '#app',
i18n, // 不要忘记
store,
router,
template: '<App/>',
components: { App }
})
--- ok, this is what the introduction is, so since the realization of internationalization, here is a simple switch between Chinese and English, then naturally we need two sets of language files in Chinese and English, vue-i18n is relatively simple, only need two js The file is imported into main.js in the form of require.
en.js English language pack:
export const lang = {
test: 'English',//英文
}
zh.js Chinese language pack:
export const lang = {
test:'中文',
}
Finally, we only need to control the value of locale by triggering the event, and call the corresponding language pack to achieve internationalization.
--- How to switch the value of locale in the component to achieve language switching.
locale: 'zh-CN', // 语言标识
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
In the code in main.js, you can see that when the value of locale is'zh-CN', the version is Chinese; when the value of locale is'en-US', the version is English. Of course, you can also change to zh and en, this is not fixed, just need to correspond.
Okay, now let's take a look at how to switch in a click event in my component.
<div @click="changeLangEvent" class="changeLang"></div>
changeLangEvent() {
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.lang;//关键语句
}else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;//关键语句
}
}
2. Grammar
Implementation in the vue file:
// 普通:
<span>{
{$t('lang.test')}}</span>
// placeholder:
<input type="text" v-model="description" :placeholder=" $t('lang.test')" >
// 三目运算:
<span>{
{flag?flag:$t('lang.test')}}</span>
Call the multi-language field in the js code:
// TODO:写法:this.$t('lang.test');
// TODO:因为js里面的数据无法实时刷新,所以需要写在computed里面
computed:{
testName: function () {
return this.$t('lang.test');
},
}
---If it is two-way binding data, you need to set
computed:{
mailAuthTxt: { //获取验证码--倒计时
get() {
if(this.isCountDown){
return this.$t('dc_lang.获取验证码');
} else {
return this.countDown;
}
},
set() {
if(this.isCountDown){
return this.$t('dc_lang.获取验证码');
} else {
return this.countDown;
}
}
}
}
Writing in common.js:
//因为common.js没有在vue文件中。所以$t.('xxxx')写法会报错。所以在main.js中写
window.vm= new Vue({});
window.vm.$i18n.t('lang.test');
Question 1: After refreshing the page, my language status will be restored to its original status. So I used sessionStorage to store my language state.
//国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
let lang = window.sessionStorage.getItem('lang')||'zh-CN';
const i18n = new VueI18n({
locale: lang, // 语言标识
fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言
silentFallbackWarn: true,//抑制警告
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('../static/js/lang/zh.js'), // 中文语言包
'en-US': require('../static/js/lang/en.js') // 英文语言包
}
})
changeLangEvent() {
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.lang;//关键语句
window.sessionStorage.setItem('lang', this.lang);
}else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;//关键语句
window.sessionStorage.setItem('lang', this.lang);
}
}
Question 2: Modify the title in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<title>我的网站名</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
document.getElementsByTagName("title")[0].innerText = window.vm.$i18n.t('lang.我的网站名');
</script>
</html>
--- There are four internationalization solutions previously seen on the Internet. Google plug-in translation is very inaccurate, do not consider. The two sets of Chinese and English are very laborious, so I don't think about it. I also wrote the translation of freeMarker before, just return it to the front-end and add it directly.
Have time to study tran.js
That's it~~~ Give yourself a heart~