【vue】双语/多语网页切换

最新推荐文章于 2024-08-24 21:27:42 发布

逆风飞翔的代码单身狗

最新推荐文章于 2024-08-24 21:27:42 发布

阅读量946

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41530639/article/details/108470293

版权

本文介绍如何使用vue-i18n插件在Vue项目中实现多语网页切换。通过安装插件，设置中间件，并在需要翻译的地方进行相应处理，即可轻松创建支持多语言的网页。

摘要由CSDN通过智能技术生成

多语网页切换

看到有些网页支持多种语言之间的切换是不是很牛逼？其实不然，你也可以的，它只是在你事先准备好的几个翻译的版本之间切换，在你想要翻译的地方把翻译放进去就可以了

1.安装vue-i18n插件

npm install vue-i18n

2.在这里把你引进的vue-i18n作为中间件处理

我们接触过的中间件有bodyParser/queryString等等
在这里插入图片描述
vue-i18n.js

// 国际化设置
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '../en'
import zh from '../zh'

Vue.use(VueI18n);
const i18n = new VueI18n({
    // 当前语言环境
    locale: 'zh',
    messages: { en, zh },
});

export default i18n

然后在项目的主入口问价去把这个中间件挂在到全局去就可以了
在这里插入图片描述