vue 项目国际化实现，目前归纳有两种方式可以实现，一种是 vue-i18n 插件，另一种方式则是v-google-translate插件! 此教程使用的则是第二种方式，为什么选择第二种方式而不是使用第一种方式呢?
第一种方式，复杂项配置，代码阅读性差，需要配置自定义语言包，将项目中可控元素进行一一替换相当难受，具体看下面有关vue-i18n相关配置教程！
第二种插件是 翻译插件 ，此插件是通过谷歌翻译，将整个页面元素下的语言翻译成对应选中的语言，但是有个缺点，翻译结果可能会出现意外!
github 地址
引用站外地址
vue-i18n
https://github.com/search?q=vue-i18n
引用站外地址
v-google-translate
https://github.com/i7eo/v-google-translate
文档地址
1、先来看下效果
以下效果是由v-google-translate该插件完成效果!
2、vue-i18n
vue-i18n 使用方式，大概意思是通过自定义语言包配置，将对应所动态语言的地方做特殊转换!
2.1 安装
版本注意: vue-i18n 版本尽量不要最新的，避免引起不必要的错误!
1
| npm install vue-i18n@8.24.5 --save
|
2.2 使用
2.2.1 创建语言包
en.js 英文 @/utils/langs/en.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
message: {
login: {
username: 'userName',
password: 'password'
}
},
...enLocale
}
export default en;
|
cn.js 中文 @/utils/langs/cn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
| import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
message: {
login: {
username: '用户名',
password: '密码'
}
},
...zhLocale
}
export default cn;
|
index.js在创建个暴露文件
1
2
3
4
5
6
7
8
|
import en from './en';
import cn from './cn';
export default {
en: en,
cn: cn
}
|
2.2.2 语言包引用
main.js 入口文件中引入 vue-i18n 并注册该插件!
locale: 'cn' 这块，我们可以在顶部做一个 language 语言切换按钮，来切换中英文，切换的时候将值存在 vuex 或者 本地存储 localStorage下来动态获取切换的语言!
1
2
3
4
5
6
7
8
9
10
11
12
| import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n';
import messages from '@/utils/langs'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'cn',
messages
})
|
2.2.3 ElementUi兼容 i18n
1
2
3
4
| Vue.use(ElementUI, {
size: Cookies.getCookie('size') || 'small',
+ i18n: (key, value) => i18n.t(key, value)
})
|
2.2.4 将 i18n 挂在到vue实例上
1
2
3
4
5
6
| new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')
|
2.2.5 在模板中使用
$t('message.login.password') 通过此方式来引用语言包对应的 key!
这只是一个登录页，将 用户名 和 密码 替换成了语言包形式$t('message.login.username')!
message.login.username 这个 就是 语言包中 所配置的 en.js和cn.js中对应的username字段，切换中英文的时候会取对应的key value!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <el-form :model="loginForm" :rules="rule" ref="ruleForm">
<el-form-item :label="$t('message.login.username')" prop="username">
<el-input v-model="loginForm.username" @focus="classObj.scaleX_U = true" @blur="classObj.scaleX_U = false"></el-input>
<div class = "underline_username" :class="{ scale_u: classObj.scaleX_U }"></div>
</el-form-item>
<el-form-item :label="$t('message.login.password')" prop="password" placeholder="请输入密码">
<el-input v-model="loginForm.password" :show-password="true" @focus="classObj.scaleX_P = true" @blur="classObj.scaleX_P = false"></el-input>
<div class = "underline_password" :class="{ scale_p: classObj.scaleX_P }"></div>
</el-form-item>
<el-button
class = "login-btn"
type="primary"
:loading="loading"
@click="isShow = true"
>
登陆
</el-button>
</el-form>
|
3、v-google-translate
3.1 安装
1
| npm install v-google-translate --save
|
3.2 入口文件注册
1
2
| import vGoogleTranslate from "v-google-translate";
Vue.use(vGoogleTranslate);
|
3.3 模板中使用
1
2
3
4
5
6
7
8
9
10
11
| <template>
<div>
<v-google-translate
ref="googleTranslateRef"
@select="onlanguagechange"
defaultLanguageCode="zh-CN"
:languages="languages"
defaultPageLanguageCode="cn"
/>
</div>
</template>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <script>
export default {
data() {
return {
language: '',
languages: [
{
code: "zh-CN",
name: "中文",
cname: "中文",
ename: "中文",
},
{
code: "en",
name: "English",
cname: "英语",
ename: "English",
},
]
}
},
methods: {
onlanguagechange( language ){
const { code, name, cname, ename } = language
console.log('language', language, this.$refs['googleTranslateRef'])
}
}
}
</script>
|
再次列举属性不全面，更多属性请查看 github文档，有详细说明!
| prop | type | desc |
|---|
| defaultLanguageCode | String | 默认语言 code ‘zh-CN’ / ‘en’ |
| languages | Array | 可选择的语言列表List，在此设置了 英文 和 中文两种语言 |
| defaultPageLanguageCode | String | 默认页面语言code |
