【实操】vue3+elementUI+i18n国际化多语言切换_vue多语言切换,样式如何处理

实现功能： vue3后台管理系统页面引入i18n国际化实现页面中英文切换

一、界面展示

【中文界面】

【英文界面】

二、实现过程

【第一步：安装i8n】

$ npm install vue-i18n
1

【第二步：创建i8n文件夹】

i18n/i18n.ts

import { createApp } from 'vue'
import App from '../App.vue'
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import enLocale from 'element-plus/es/locale/lang/en'
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
import en from './locale/en'
import zh from './locale/zh-CN'

const language = (
   (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
 ).toLowerCase();

const messages={
 en: {
     ...en,
     ...enLocale
 },
 zh: {
     ...zh,
     ...zhLocale
 }
}

const i18n = createI18n({
   locale: language.split("-")[0] || "zh", // 设置默认语言
   messages,
 });

export default i18n;
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

i18n/locale/en.ts

export default {
  language: {
    China: 'China',
    English: 'English',
  },
  message: {
    Home: 'Home',
    SystemManage: 'System Manage',
    RouterManage: 'Router Manage'
  }
}
1
2
3
4
5
6
7
8
9
10
11

i18n/i18n.ts/zh-CN.ts

export default {
  language: {
    China: '中文',
    English: '英文',
  },
  message: {
    Home: '首页',
    SystemManage: '系统管理',
    RouterManage: '路由管理'
  }
}
1
2
3
4
5
6
7
8
9
10
11

【第三步：main.ts中引入】

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import i18n from './i18n/i18n'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/index.scss'

createApp(App).use(ElementPlus,{
  i18n:(key,value) => i18n.t(key,value),
})

createApp(App)
  .use(store)
  .use(router)
  .use(i18n)
  .use(ElementPlus)
  .mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

【第四步：页面中使用】

模版中

<span>{{ $t('language.China') }}</span>
<el-option
  v-for="item in languageOptions"
  :key="item.value"
  :label="$t(item.label)"
  :value="item.value"
/>
1
2
3
4
5
6
7

js中

import { getCurrentInstance } from "vue";
import { useI18n } from 'vue-i18n'//要在js中使用国际化
// 语言切换
function change(val) {
	const { proxy } = getCurrentInstance();
	const languageChange = (val: String) => {
	   proxy.$i18n.locale = val === '0' ? 'zh' : val === '1' ? 'en' : ''
	}
}
// 获取值
const { t } = useI18n();
console.log(t('message.Home')) // 首页
1
2
3
4
5
6
7
8
9
10
11
12

例子——头部组件

<template>
  <div class="header">
    <kb-humburger @toggleClick="toggleClick" />
    <div class="header-right">
      <el-select class="language-select" v-model="languageValue" @change="languageChange">
        <el-option
          v-for="item in languageOptions"
          :key="item.value"
          :label="$t(item.label)"
          :value="item.value"
        />
      </el-select>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar shape="square" :size="30" :src='`@import "@/assets/portrait.png"`' /> 
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>{{ $t('language.China') }}</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import KbHumburger from '@/components/KbHamburger.vue'
import { ref } from 'vue'
import { useStore } from 'vuex'
import {
  ArrowDown
} from '@element-plus/icons-vue'
import { getCurrentInstance } from "vue";
import { useI18n } from 'vue-i18n'//要在js中使用国际化

export default {
  components: {
    KbHumburger,
    ArrowDown
  },
  setup() {
    const isCollapse = ref(true)
    const store = useStore()
    const toggleClick = () => {
      store.dispatch('toggleSideBar')
    }
    
    const { proxy } = getCurrentInstance();
    const languageValue = ref('0') 
    const { t } = useI18n();
    const languageOptions = [
      {
        value: '0',
        label: 'language.China',
      },
      {
        value: '1',
        label: 'language.English',
      },
    ]
    const languageChange = (val: String) => {
      proxy.$i18n.locale = val === '0' ? 'zh' : val === '1' ? 'en' : ''
    }
 
    return {
      toggleClick,
      languageValue,
      languageOptions,
      languageChange
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  .el-dropdown-link {
    display: flex;
    align-items: center
  }
  .header-right {
    display: flex;
    justify-content: space-between;
    width: 160px;
    .language-select {
      width: 100px;
    }
  }
}
</style>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

结尾

资料：i18n文档