//src\components\level2\goods.vue
<template>
({{ $t("message.hello") }} {{ $t("message.test") }})
...........以下省略..........
//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')
//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>
同时使用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