vue3 elementplus 多语言 i18n

//src\components\level2\goods.vue
<template>
    ({{ $t("message.hello") }} {{ $t("message.test") }})
    ...........以下省略..........
1
2
3
4

//src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/reset.css'

import api from './api/index'
import { createI18n } from 'vue-i18n'		//导入i18n
import {messages} from '../lang/vue-lang'
import ElementPlus from 'element-plus'

import installElementPlus from './plugins/element'


const i18n = createI18n({
    locale: 'ja', // set locale设置语言
    messages, // set locale messages设置语言包
})

const app = createApp(App)
app.config.globalProperties.$api=api;
installElementPlus(app)
app.use(i18n)			//使用i18n
app.use(ElementPlus)
app.use(store).use(router).mount('#app')
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

//src\components\common\lang.vue
<template>
//修改i18n的语言
  <el-dropdown @command="selectLang">
    <el-button type="primary">
      VUE国际化<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="en">英文</el-dropdown-item>
        <el-dropdown-item command="jp">日文</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

//修改elementplus 的语言
  <el-dropdown @command="selectLang2">
    <el-button type="primary">
      ELEMENTPLUS国际化<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="en">英文</el-dropdown-item>
        <el-dropdown-item command="jp">日文</el-dropdown-item>
        <el-dropdown-item command="cn">中文</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-config-provider :locale="localexx">1</el-config-provider>
</template>

<script>
import { ElConfigProvider } from "element-plus";
import cn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";
import ja from "element-plus/lib/locale/lang/ja";
import { computed, ref } from "vue";
export default {
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
    };
  },

  methods: {
    selectLang(command) {
      this.$i18n.locale = command;
    },
  },
  setup() {
    const language = ref("ja");
    const localexx = computed(() =>
      language.value === "cn" ? cn : language.value === "en" ? en : ja
    );

    const selectLang2 = (command) => {
      language.value = command;
    };

    return {
      localexx,
      selectLang2,
    };
  },
};
</script>

<style>
</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

同时使用i18n和elementplus的多语言设置

配置i18n

• npm install vue-i18n -S(or -D)安装i18n
• 配置main.ts，见带注释的代码
• 使用方法见goods.vue里{{ $t(“message.hello”) }}

配置elementplus 多语言
参考lang.vue，使用ElConfigProvider可在页面动态修改elementplus的语言。
el-config-provider组件可放在任何地方，可包裹任意内容。

貌似elementplus的多语言只能修改elementplus自身组件的语言，想修改其他语言需要使用i18n