vue3項目如何國際化實戰(zhàn)指南

更新時間：2022年09月22日 15:53:32 作者：別拿bug搞偷襲

像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項目如何國際化的相關(guān)資料,需要的朋友可以參考下

vue3項目如何國際化

我們已經(jīng)屬性vue2 ，使用i18n ，進行國際化
那vue3 我們?nèi)绾闻渲?i18n 呢？

配置

Ⅰ、安裝

npm i vue-i18n

Ⅱ、創(chuàng)建 il18n

在src目錄下，創(chuàng)建 i18n 文件夾，并在下面分別創(chuàng)建三個文件分別為：
① index.js => 主文件用于導(dǎo)入 i18n ，和相關(guān)配置
② zh.js => 存放中文內(nèi)容
③ en.js => 存放英文內(nèi)容

① main.js 示例 =>

import { createI18n } from 'vue-i18n';
import ZH from './zh.js';
import EN from './en.js';
const messages = {
  zh: { ...ZH  },
  en: { ...EN  },
};

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh',
  messages
});
export default i18n;

locale屬性用于設(shè)置初始語言，值要和 messages 中的屬性 key ，相互對應(yīng)

② zh.js 示例 =>

export default {
  person: {
    name:'張三',
    hobby:'唱跳，rap，籃球'
  },
};

③ en.js 示例 =>

export default {
  person: {
    name:'zhangsan',
    hobby:'Singing and dancing, rap, basketball'
  },
};

Ⅲ、在main.js 中配置 i18n

import { createApp } from "vue";
import App from "./App.vue";
import i18n from './i18n/index';
const app = createApp(App);
app
    .use(i18n)
    .mount("#app");

使用

Ⅰ、在 html 中使用如果只是在 html 中使用，不用在導(dǎo)入任何東西

<template>
  <div>
   <span> {{ $t("person.name") }} </span> 
   <span> {{ $t("person.hobby") }} </span>
  </div>
</template>

Ⅱ、在js 中使用需要通過導(dǎo)入 getCurrentInstance 進行獲取

<script setup>
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;

console.log( $t("person.name") ); // => 獲取值
</script>

Ⅱ、修改語言（和獲取當前語言）

切換語言要導(dǎo)入vue-i18n 的 locale 屬性，locale 是ref 對象，要修改value
不要修改 i18n/index.js文件, 導(dǎo)出的對象屬性

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
// 切換中文
function  changeZh(){   locale.value = 'zh';   };
// 切換英文
function  changeEn(){   locale.value = 'en';   };
</script>