在vue.js中实现多语言切换（vue-i18n的使用）

• 说明： 使用vue-i18n可以在vue.js中实现多语言切换，让一个页面中同时支持中/英文显示。
• 以下所有操作都是在已有的vue-cli项目下进行的。

1. 下载安装

npm install vue-i18n -save

2. 在main.js中引用

import Vue from 'vue';

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
...

// 多语言切换
const i18n = new VueI18n({
locale: 'zh', //设置默认语言
messages:{
'zh': require('@/assets/lang/zh_cn'),
'en': require('@/assets/lang/en')
}
});

...

// 在Vue实例中引用 i18n
new Vue({
router,
i18n,   // 引用i18n
render: h => h(App)
}).$mount("#app");

3. 创建语言包

在 src/assets/lang 文件夹下面，分别创建不同的语言包，我创建的是 en.js 和 zh_cn.js 两个语言包，代码如下，很简单一看就懂：

• src/assets/lang/en.js

module.exports = {
language: {
name: 'English'
},

login: {
title: 'Welcome',
username: 'user name'
}
}

• src/assets/lang/zh_cn.js

module.exports = {

language: {
name: '中文'
},

login: {
title: '系统登录',
username: '请输入用户名',
}
}

4.前台显示

在 src/views/test.vue 文件中：

<template>
<div>
<!-- 注1：将指定的语言变量，直接显示在网页里 -->
<h1>{{ $t('login.title') }}</h1>

<!-- 注2：将指定的语言变量，绑定在一个input标签里 -->
<input type='text' :placeholder="$t('login.username')" >

<!-- 注3：引用变量，变量的值在js代码中，从定义的语言变量中赋值过来 -->
<p>当前语言： {{ message }} </p>
</div>
</template>

<script>

export default {
data() {
return {
// 注3：将一个指定的语言变量的值赋给一个变量
message: this.$t('language.name')
}
}
};
</script>

5.语言切换

在上面代码的基础上增加语言切换功能。

<template>
<div>
<!-- 注1：语言切换按钮 -->

<!-- 注2：在按钮中，加入单击事件，事件指向语言切换函数 -->
<button @click="switch_the_language">中文/English<button>

<h1>{{ $t('login.title') }}</h1>

<input type='text' :placeholder="$t('login.username')" >

<p>当前语言： {{ message }} </p>
</div>
</template>

<script>

export default {
data() {
return {
message: this.$t('language.name')
}
},

methods: {

// 注3：增加语言切换函数
switch_the_language() {
if (this.$i18n.locale === 'zh') {
this.$i18n.locale = 'en'
} else {
this.$i18n.locale = 'zh'
}
}

}
};
</script>

就到这里吧。

• 点赞
• 收藏
• 分享
• 文章举报