快捷導(dǎo)航

基于Vue3+element-plus實(shí)現(xiàn)中英文切換功能

更新時(shí)間：2024年11月25日 11:09:38 作者：軟件小偉

在?Vue?3?項(xiàng)目中結(jié)合?vue-i18n?和?Element?Plus?實(shí)現(xiàn)中英文切換是一個(gè)常見的需求,下面是一個(gè)詳細(xì)的步驟指南,幫助你完成這個(gè)任務(wù),需要的朋友可以參考下

前言

在 Vue 3 項(xiàng)目中結(jié)合 vue-i18n 和 Element Plus 實(shí)現(xiàn)中英文切換是一個(gè)常見的需求。下面是一個(gè)詳細(xì)的步驟指南，幫助你完成這個(gè)任務(wù)。

安裝引入

1. 安裝依賴

首先，你需要安裝 vue-i18n 和 Element Plus。

npm install vue-i18n@next element-plus --save

第二步驟：安裝vue-i18n

 
// npm
npm install vue-i18n@9
 
// yarn
yarn add vue-i18n@9

2. 創(chuàng)建國際化文件

在項(xiàng)目中創(chuàng)建一個(gè)文件夾 locales，然后在里面創(chuàng)建兩個(gè)文件：en.js 和 zh.js，分別用于存儲英文和中文的翻譯。

locales/en.js

第三步：在index.js里，引入vue-i18n,并進(jìn)行相關(guān)配置后導(dǎo)出

export default {
  message: {
    hello: 'Hello, world!'
  },
  button: {
    submit: 'Submit'
  },
  // 其他翻譯
};

locales/zh.js

export default {
  message: {
    hello: '你好，世界！'
  },
  button: {
    submit: '提交'
  },
  // 其他翻譯
};

3. 配置 vue-i18n

在 main.js 或 main.ts 文件中配置 vue-i18n。

main.js 或 main.ts

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
 
const messages = {
  en: en,
  zh: zh
};
 
const i18n = createI18n({
  locale: 'zh', // 默認(rèn)語言
  messages,
});
 
const app = createApp(App);
 
app.use(i18n);
app.use(ElementPlus);
 
app.mount('#app');

4. 使用 vue-i18n 進(jìn)行翻譯

在你的 Vue 組件中使用 $t 方法進(jìn)行翻譯。

App.vue

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <el-button>{{ $t('button.submit') }}</el-button>
    <el-select v-model="currentLocale" @change="changeLocale">
      <el-option label="English" value="en"></el-option>
      <el-option label="中文" value="zh"></el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentLocale: this.$i18n.locale,
    };
  },
  methods: {
    changeLocale() {
      this.$i18n.locale = this.currentLocale;
    }
  }
};
</script>

5. 配置 Element Plus 國際化

為了讓 Element Plus 的組件也支持國際化，你需要在 main.js 或 main.ts 中配置 Element Plus 的國際化

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import enUs from 'element-plus/lib/locale/lang/en';
 
const messages = {
  en: {
    ...en,
    ...enUs
  },
  zh: {
    ...zh,
    ...zhCn
  }
};
 
const i18n = createI18n({
  locale: 'zh', // 默認(rèn)語言
  messages,
});
 
const app = createApp(App);
 
app.use(i18n);
app.use(ElementPlus, {
  locale: i18n.global.locale === 'zh' ? zhCn : enUs,
});
 
app.mount('#app');