安装vue-i18n
npm install vue-i18n@8 --save
// npm install vue-i18n–save 9版本需要vue3.0
// 在vue2环境下，默认安装 npm install vue-i18n 的版本是 vue-i18n@9.2.2，
// 报错信息里提示这个版本要求是vue3，所以我们安装适合vue2版本的vue-i18n 依赖包。
// 运行指令查看所有版本
// npm view vue-i18n versions --json
创建语言文件
zh.js
//zh.js
const zh={
lang:'中文'
}
export default zh
yn.js
//yn.js
const yn={
lang:'Trung Quốc'
}
export default yn
index.js
// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 引入各个语言配置文件
import zhLocale from './config/zh'
import ynLocale from './config/yn'
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
locale: localStorage.getItem('language') || 'zh', // 语言标识
// 添加多语言（每一个语言标示对应一个语言文件）
messages: {
'zh': zhLocale,
'yn': ynLocale
}
})
// 暴露i18n
export default i18n
main.js
import Vue from 'vue'
import App from './App.vue'
// 引入i18n
import i18n from './index'
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
vue页面使用
模板上使用： $t('xxx') js里面使用：this.$t('xxx')
this.$i18n.locale 获取语言类型
<template>
<div>
<p>{{ $t('lang') }}</p>
<button @click="ceshi">切换</button>
</div>
</template>
<script>
export default {
methods: {
ceshi(){
//切换语言
if(this.$i18n.locale=='yn'){
this.$i18n.locale = 'zh';
localStorage.setItem('language','zh')
}else{
this.$i18n.locale = 'yn';
localStorage.setItem('language','yn')
}
}
}
}
</script>
菜单栏切换语言
深层数据切换语言，使用递归，可以结合vuex使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const menuData = [
{
name: {
en: 'Home',
zh: '首页'
},
age:20,
children: [
{
name: {
en: 'News',
zh: '新闻'
},
age:21,
children: []
},
{
name: {
en: 'About',
zh: '关于我们'
},
age:22,
children: []
}
]
},
{
name: {
en: 'Services',
zh: '服务'
},
age:23,
children: [
{
name: {
en: 'Web Design',
zh: '网页设计'
},
age:24,
children: []
},
{
name: {
en: 'Programming',
zh: '编程'
},
age:25,
children: []
}
]
}
];
function switchLanguage(data, lang) {
if (Array.isArray(data)) {
if(data.length==0) return []
} else {
if(data==null) return []
}
return data.map(item => {
return {
...item,//
name: item.name[lang],//如果是相同的属性就会替换
children: switchLanguage(item.children, lang)
};
});
}
// 切换到中文
const chineseMenuData = switchLanguage(menuData, 'en');
console.log(chineseMenuData);
</script>
</body>
</html>
uniapp多语言切换vue2 自带了vue-i18n
main.js
import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'// v8.x
// 国际化 json 文件，文件内容详见下面的示例
import zh from './zh.json'
import yn from './yn.json'
const messages = {
'zh': zh,
'yn': yn
}
let i18nConfig = {
locale:uni.getStorageSync('language') || 'zh',// 获取已设置的语言
messages
}
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
zh.json
{
"login.lang": "语言选择",
"login.zh": "中文",
"login.yn": "越南语"
}
yn.json
{
"login.lang": "Lựa chọn ngôn ngữ",
"login.zh": "Trung Quốc",
"login.yn": "Tiếng Việt"
}
vue页面使用
模板上使用： $t('xxx') js里面使用：this.$t('xxx')
this.$i18n.locale 获取语言类型
<template>
<view>
<view class="flex align-center px-5 mb-4">
<view>{{$t('login.lang')}}：</view>
<picker @change="bindPickerChange" :value="index11" :range="array" class="flex-1">
<view class="uni-input">{{array[index11]}}</view>
</picker>
</view>
</view>
</template>
<script>
export default {
computed:{
array(){
return [this.$t('login.zh'),this.$t('login.yn')]
},
index11(){
let inop
if(this.$i18n.locale == 'zh'){
inop=0
}else{
inop=1
}
return inop
}
},
methods: {
bindPickerChange: function(e) {
this.index = e.detail.value
if(e.detail.value==0){
this.$i18n.locale = 'zh';
uni.setStorageSync('language','zh')
}else{
this.$i18n.locale = 'yn';
uni.setStorageSync('language','yn')
}
},
}
}
</script>