2024年06月20日 建站教程
想利用Vue框架实现项目多语言和国际化功能？下面web建站小编给大家简单介绍一下实现方法！
安装脚手架
npm install vue-i18n --save
配置Vue-i18n
//创建一个i18n文件夹，新建index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'en', // 默认使用英文
messages: {
en: require('./en.json'),
zh: require('./zh.json'),
},
});
export default i18n;
i18n文件夹中创建en.json和zh.json文件
//en.json
{
"hello": "Hello",
"world": "World",
"welcome": "Welcome"
}
//zh.json
{
"hello": "你好",
"world": "世界",
"welcome": "欢迎"
}
使用Vue-i18n
<template>
<div>
<p>{{ $t('hello') }}</p>
<p>{{ $tc('world', 1) }}</p>
<p>{{ greeting }}</p>
</div>
</template>
<script>
import i18n from '@/i18n';
export default {
computed: {
greeting() {
return this.$t('welcome', { name: 'Vue' });
},
},
created() {
// 设置语言为中文
i18n.locale = 'zh';
},
};
</script>
除了上面的方法之外，还可以利用Vue CLI提供了官方插件vue-cli-plugin-i18n，可以快速集成多语言和国际化。
本文链接：http://so.lmcjl.com/news/6905/