Vue 使用 Vue I18n 实现国际化的实现代码
Vue I18n 是一个基于 Vue.js 的国际化解决方案，提供了一个简单易用的 API，帮助开发者快速实现国际化。下面是使用 Vue I18n 实现国际化的实现代码。
安装
需要安装 Vue I18n，使用 npm 安装命令：`npm install vue-i18n --save`
注入
然后，需要在 Vue 实例中注入 Vue I18n，使用以下代码：
```javascript
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})
```
语言包
创建两个语言包，zh.js 和 en.js，分别包含中文和英文语言的内容。
zh.js：
```javascript
export const lang = {
homeOverview: '首页概览',
firmOverview: '公司概述',
firmReports: '财务报表',
firmAppendix: '更多附录',
firmIndex: '主要财务指标',
firmAnalysis: '对比分析',
firmNews: '新闻事件档案',
firmOther: '其他功能'
}
```
en.js：
```javascript
export const lang = {
homeOverview: 'Home overview',
firmOverview: 'firmOverview',
firmReports: 'firmReports',
firmAppendix: 'firmAppendix',
firmIndex: 'firmIndex',
firmAnalysis: 'firmAnalysis',
firmNews: 'firmNews',
firmOther: 'firmOther'
}
```
按钮控制切换语言
使用 `$i18n.locale` 属性来切换语言，例如：
```html
<div class="top_btn" @click="changeLangEvent">中文</div>
changeLangEvent() {
this.$confirm('确定切换语言吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.$i18n.locale === 'zh-CN') {
this.$i18n.locale = 'en-US';
console.log('en-US')
} else {
this.$i18n.locale = 'zh-CN';
console.log('zh-CN')
}
}).catch(() => {
console.log('catch');
this.$message({
type: 'info'
});
});
}
```
模板渲染
使用 `$t` 函数来渲染语言，例如：
```html
<span v-text="$t('lang.homeOverview')"></span>
<span>{{$t('lang.homeOverview')}}</span>
```
如果使用 Element UI，可以使用冒号来翻译 label，例如：
```html
<label :label="$t('order.userName')"></label>
```
动态渲染
使用计算属性来动态渲染语言，例如：
```javascript
computed: {
navCompany: function() {
if (this.nav_company) {
let str = 'lang' + this.nav_company;
return this.$t(str);
}
}
}
```
使用 Vue I18n 可以轻松实现国际化，满足公司项目的需求。
