在vue.js中实现多语言切换（vue-i18n的使用）

• 说明： 使用vue-i18n可以在vue.js中实现多语言切换，让一个页面中同时支持中/英文显示。
• 以下所有操作都是在已有的vue-cli项目下进行的。

1. 下载安装

npm install vue-i18n -save

2. 在main.js中引用

import Vue from 'vue';

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
...


// 多语言切换
const i18n = new VueI18n({
	locale: 'zh', //设置默认语言
	messages:{
		'zh': require('@/assets/lang/zh_cn'),
		'en': require('@/assets/lang/en')
	}
});

...

// 在Vue实例中引用 i18n
new Vue({
	router,
	i18n,   // 引用i18n
	render: h => h(App)
}).$mount("#app");

3. 创建语言包

在 src/assets/lang 文件夹下面，分别创建不同的语言包，我创建的是 en.js 和 zh_cn.js 两个语言包，代码如下，很简单一看就懂：

• src/assets/lang/en.js

module.exports = {	
	language: {
		name: 'English'
	},
	
	login: {
		title: 'Welcome',
		username: 'user name'
	}
}

• src/assets/lang/zh_cn.js

module.exports = {
	
	language: {
	    name: '中文'
	},
		
	login: {
		title: '系统登录',
		username: '请输入用户名',
	}
}

4.前台显示

在 src/views/test.vue 文件中：

5.语言切换

在上面代码的基础上增加语言切换功能。

就到这里吧。