• 说明： 使用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 文件中：

<template>
	<div>
		<!-- 注1：将指定的语言变量，直接显示在网页里 -->
		<h1>{{ $t('login.title') }}</h1>
		
		<!-- 注2：将指定的语言变量，绑定在一个input标签里 -->
		<input type='text' :placeholder="$t('login.username')" >
		
		<!-- 注3：引用变量，变量的值在js代码中，从定义的语言变量中赋值过来 -->
		<p>当前语言： {{ message }} </p>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				// 注3：将一个指定的语言变量的值赋给一个变量
				message: this.$t('language.name')
			}
		}
	};
</script>

5.语言切换

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

<template>
	<div>
		<!-- 注1：语言切换按钮 -->
		
		<!-- 注2：在按钮中，加入单击事件，事件指向语言切换函数 -->
		<button @click="switch_the_language">中文/English<button>
	
		<h1>{{ $t('login.title') }}</h1>
		
		<input type='text' :placeholder="$t('login.username')" >
		
		<p>当前语言： {{ message }} </p>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				message: this.$t('language.name')
			}
		},
		
		methods: {
		
			// 注3：增加语言切换函数
			switch_the_language() {
				if (this.$i18n.locale === 'zh') {
					this.$i18n.locale = 'en'
				} else {
					this.$i18n.locale = 'zh'
				}
			}
		
		
		}
	};
</script>

就到这里吧。