使用 vue-i18n 切换中英文的过程需要遵循以下几个步骤:
在使用 vue-i18n 进行中英文切换前,需要在项目中安装 vue-i18n。可以使用 npm 等工具进行安装,具体的安装命令为:
npm install vue-i18n --save
在 /src 目录下新建一个文件夹 i18n,然后在该文件夹中新建中英文语言文件,例如:
// 中文语言文件:zh-CN.js
export default {
hello: '你好,世界!'
}
// 英文语言文件:en-US.js
export default {
hello: 'Hello, world!'
}
这里需要注意,语言文件中的属性名需要与业务代码中使用的属性名一一对应。
在项目入口文件(main.js)中引入和配置 vue-i18n,例如:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhCN from './i18n/zh-CN'
import enUS from './i18n/en-US'
// 引入 vue-i18n
Vue.use(VueI18n)
// 配置 i18n
const i18n = new VueI18n({
locale: 'zh-CN', // 设置默认语言为中文
messages: {
'zh-CN': zhCN,
'en-US': enUS
}
})
new Vue({
el: '#app',
i18n, // 将 i18n 添加到 Vue 实例中
render: h => h(App)
})
这样,vue-i18n 就已经配置好了。
在业务代码中使用 vue-i18n 进行中英文切换,例如:
<template>
<div id="app">
<h1>{{ $t('hello') }}</h1>
<button @click="changeLocale">切换语言</button>
</div>
</template>
<script>
export default {
methods: {
changeLocale () {
// 切换语言
this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
}
}
}
</script>
这里使用了 vue-i18n 提供的 $t
方法进行翻译,然后使用 this.$i18n.locale
切换语言。
<template>
<div v-html="$t('home.title')"></div>
<button @click="changeLocale">切换语言</button>
</template>
<script>
export default {
methods: {
changeLocale () {
this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
}
}
}
</script>
// 中文语言文件:zh-CN.js
export default {
home: {
title: '<h2>欢迎来到我的站点!</h2>'
}
}
// 英文语言文件:en-US.js
export default {
home: {
title: '<h2>Welcome to my website!</h2>'
}
}
<template>
<table>
<thead>
<tr>
<th>{{ $t('table.id') }}</th>
<th>{{ $t('table.name') }}</th>
<th>{{ $t('table.price') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}¥</td>
</tr>
</tbody>
</table>
<button @click="changeLocale">切换语言</button>
</template>
<script>
export default {
data () {
return {
list: [
{ id: 1, name: '苹果', price: 5 },
{ id: 2, name: '香蕉', price: 3 },
{ id: 3, name: '橙子', price: 4 },
{ id: 4, name: '草莓', price: 6 },
{ id: 5, name: '葡萄', price: 8 }
]
}
},
methods: {
changeLocale () {
this.$i18n.locale = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
}
}
}
</script>
// 中文语言文件:zh-CN.js
export default {
table: {
id: '编号',
name: '名称',
price: '价格'
}
}
// 英文语言文件:en-US.js
export default {
table: {
id: 'ID',
name: 'Name',
price: 'Price'
}
}
这里展示了如何使用 vue-i18n 将表格数据进行国际化的操作。
本文链接:http://task.lmcjl.com/news/11491.html