vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
更新時(shí)間：2022年09月22日 15:53:32 作者：別拿bug搞偷襲
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下
vue3項(xiàng)目如何國(guó)際化
- 我們已經(jīng)屬性vue2 ，使用i18n ，進(jìn)行國(guó)際化
- 那vue3 我們?nèi)绾闻渲?i18n 呢 ？
配置
Ⅰ、安裝
npm i vue-i18n
Ⅱ、創(chuàng)建 il18n
- 在src目錄下，創(chuàng)建 i18n 文件夾，并在下面分別創(chuàng)建三個(gè)文件 分別為 ：
- ① 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è)置初始語(yǔ)言， 值要和 messages 中的屬性 key ，相互對(duì)應(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 中使用 需要通過(guò) 導(dǎo)入 getCurrentInstance 進(jìn)行獲取
<script setup>
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
console.log( $t("person.name") ); // => 獲取值
</script>
Ⅱ、修改語(yǔ)言 （和獲取當(dāng)前語(yǔ)言）
- 切換語(yǔ)言要導(dǎo)入vue-i18n 的 locale 屬性，locale 是ref 對(duì)象，要修改value
- 不要修改 i18n/index.js文件, 導(dǎo)出的對(duì)象屬性
<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
// 切換中文
function changeZh(){ locale.value = 'zh'; };
// 切換英文
function changeEn(){ locale.value = 'en'; };
</script>
總結(jié)
到此這篇關(guān)于vue3項(xiàng)目如何國(guó)際化的文章就介紹到這了,更多相關(guān)vue3項(xiàng)目國(guó)際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章給大家分享了Vue實(shí)例的相關(guān)內(nèi)容以及重要知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁(yè)面顯示的組件是根據(jù)角色變化而變化的，怎么實(shí)現(xiàn)這個(gè)效果呢，下面小編給大家介紹下Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細(xì)介紹Vue自定義指令的詳細(xì)內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識(shí)別
Face-api.js是一個(gè)JavaScript API,是基于tensorflow.js核心API 的人臉檢測(cè)和人臉識(shí)別的瀏覽器實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue Element前端應(yīng)用開發(fā)之echarts圖表
在我們做應(yīng)用系統(tǒng)的時(shí)候，往往都會(huì)涉及圖表的展示，綜合的圖表展示能夠給客戶帶來(lái)視覺的享受和數(shù)據(jù)直觀體驗(yàn)，同時(shí)也是增強(qiáng)客戶認(rèn)同感的舉措之一2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue?Axios請(qǐng)求取消和重發(fā)封裝的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue?Axios請(qǐng)求取消和重發(fā)的封裝的實(shí)現(xiàn),文章通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場(chǎng)景是簡(jiǎn)單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。下面這篇文章主要給大家介紹了Vue.js中的計(jì)算屬性,需要的朋友可以參考借鑒，一起來(lái)看看吧。2017-01-01
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10