使用Vue + vue-i18n搭建国际化网站

原创

已于 2022-10-28 16:19:24 修改 · 1k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2022-10-28 16:13:17 首次发布

本文介绍了如何使用vue-i18n插件在Vue项目中搭建国际化功能，包括安装依赖、创建语言文件、配置i18n.js、设置主文件main.js、使用$t语法编写文案，以及动态改变语言的方法。适用于Vue2项目的国际化解决方案。

有时候项目的页面需要能够切换多种语言来显示，可以使用vue-i18n这个插件库来实现功能

一、安装vue-i18n依赖

NPM

npm install vue-i18n

Yarn

yarn add vue-i18n

二、创建国际化文件夹和文件

1.在src根目录下新建i18n文件夹

2.i18n文件夹下新建i18n.js文件和langs文件夹

3.langs文件夹下新建语言文件（zh.js、en.js等）

三、配置i18n.js文件

创建i18n实例

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './langs/en.js' //英语
import zh from './langs/zh.js' //中文

Vue.use(VueI18n);

const i18n = new VueI18n({
	locale: zh, //默认使用中文
	messages: {
		'zh': zh,
        'en': en
	}
})

export default i18n;