VUE｜实现静态网页多语言切换，并存储在cookie中

最新推荐文章于 2024-07-22 10:03:37 发布

StellaXiao98

最新推荐文章于 2024-07-22 10:03:37 发布

阅读量917

点赞数 2

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/StellaXiao98/article/details/120056606

版权

本文介绍如何在Vue2.0项目中实现静态网页的多语言切换，并利用Cookie保存用户的选择。首先，通过全局引入vue-i18n并配置语言文件。接着，创建语言选择选项供用户切换，当用户选择语言后，使用js-cookie库将选定的语言存储到Cookie中，以确保刷新页面后仍保留用户设定的语言。

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

背景：

VUE2.0项目，但其实应用的基本都是原生的方法，所以是不是vue项目应该都有共通之处。

想要达成的效果：

通过选择框选择语言设置给静态页面，刷新页面保存之前的语言选择。

----------------------------------

1.语言设置

全局main.js文件引入i18n

~~题外话：刚了解到i18n的命名原因觉得挺有意思的——internationalization 的首尾字母i、n，中间有18个字母，所以叫i18n~~

安装vue-i18n

npm install vue-i18n -S

======= main.js =======

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
    locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh': require('./VueI18n/language-zh'),//中文的翻译文本
        'en': require('./VueI18n/language-en')//英文翻译文本
    }
});

其中language-zh和language-en文