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

有时候项目的页面需要能够切换多种语言来显示，可以使用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;

四、编写langs文件夹下的语言模板

1.zh.js

<