纯前端如何实现多语言切换

刘杨造梦程序开发建站

于 2022-09-23 00:18:54 发布

阅读量944

点赞数

分类专栏：前端疑难杂症文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/127002540

版权

前端疑难杂症专栏收录该内容

62 篇文章 19 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了使用Vue.js的国际化插件vue-i18n实现前端多语言切换的方法，包括将用户选择的语言保存在cookie或localStorage中，通过设置属性动态替换文本，以及处理JavaScript中文字的多语言适配。详细步骤包括定义不同语言的JSON对象，遍历DOM进行文本替换，以及提供一个函数来获取不同语言环境下的文本。

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

VUE实现项目多语言，有个比较不错的国际化插件：vue-i18n，需要用的时候具体可以自己查语法

　　组件git地址：vue-i18n的github
　　组件文档地址：vue-i18n的文档

　　想实现的效果：需要在web中实现多语言的切换，当用户语言切换完成后下次重新打开网页，也是上次设置的语言进行显示。

　　实现步骤：

1、在用户点击切换语言后，把选择的语言版本保存在cookie或storage中

//写入cookie函数
function setCookie(name,value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取cookie
function getCoo

了解本专栏