vue实现国际化

这里为了简单，将所有的东西都写到main.js，在实际的应用中需要将这些拆分到不同组件中。

1. 实现国际化配置

1.1 安装vue的国际化支持

这里创建项目什么的，自己搞定，或者百度；创建好项目，进入项目文件夹，安装vue-i18n：

npm install vue-i18n

当然如果你没有没事使用包管理工具，那么你可以直接这样使用：

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

1.2 配置使用

这里我们使用包管理工具的方式配置，我们直接在main.js中配置：

import Vue from 'vue';
import App from './App';
import router from './router';
import VueI18n from 'vue-i18n';

Vue.config.productionTip = false;
Vue.use(VueI18n);			// 挂在i18n插件

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

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

在上面我们引用了两个语言包，这里我们在对应的位置创建这两个语言包：

// en.js：英文语言包：
export const operation = { 
	add: 'add',// 添加
	del: 'delete',// 删除
	edit: 'edit',// 编辑
	select: 'select',// 查看
}

// zh.js：中文语言包：
export const operation = { 
	add: '添加',
	del: '删除',
	edit: '编辑',
	select: '查看',
}

到这里我们就完成了所有配置。

2. 在页面中使用国际化

2.1 页面中获取到配置的属性

我们知道vue中对于文字数据的渲染，有以{{}}或者v-text、v-html等的形式，使用国际化后使用的方式也是没有变的，但是我们要做一点小小的调整。

例如我们使用{{}}时：

<!-- $t 是i18n组件注入到vue中的一个属性，我们可以通过这个属性获取配置中的名称 -->
<button>{{ $t('operation.add') }}</button>
<button>{{ $t('operation.select') }}</button>
<button>{{ $t('operation.edit') }}</button>
<button>{{ $t('operation.del') }}</button>

2.2 修改语言

changeLang = () => {
	if(this.$i18n.locale === 'zh-CN') {
		this.$i18n.locale = 'en-US';		// 切换语言
	}else {
		this.$i18n.locale = 'zh-CN';		// 切换语言
	}
}

到这，前端 vue-i18n 国际化插件在模块化环境中的开发实践就全部完成了。