如何通过vue-i18n插件实现网站的多语言切换功能？

本文共计1002个文字，预计阅读时间需要5分钟。

前言：有些项目我们需要支持多种语言切换，满足国际化需求。Vue-i18n 是一个 Vue 插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松地将我们的项目国际化。中文主要作用是：

前言

有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。

安装vue-i18n

我们使用npm安装vue-i18n。

npm install vue vue-i18n --save

引入vue-i18n

首先在 main.js 中引入 vue-i18n。

import Vue from 'vue' import App from './App' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 通过插件的形式挂载

接着创建带有选项的 VueI18n 实例。

const i18n = new VueI18n({ locale: localStorage.getItem('locale') || 'zh-CN', //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh-CN': require('./lang/zh'), // 中文语言包 'en-US': require('./lang/en') // 英文语言包 } })

注意实例中加载了中英文两个语言包。