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>
總結(jié)
到此這篇關(guān)于vue3項目如何國際化的文章就介紹到這了,更多相關(guān)vue3項目國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章給大家分享了Vue實例的相關(guān)內(nèi)容以及重要知識點，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
Vue3的setup在el-tab中動態(tài)加載組件的方法
公司某項目需求在頁面顯示的組件是根據(jù)角色變化而變化的，怎么實現(xiàn)這個效果呢，下面小編給大家介紹下Vue3的setup在el-tab中動態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細介紹Vue自定義指令的詳細內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue Element前端應(yīng)用開發(fā)之echarts圖表
在我們做應(yīng)用系統(tǒng)的時候，往往都會涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和數(shù)據(jù)直觀體驗，同時也是增強客戶認同感的舉措之一2021-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue?Axios請求取消和重發(fā)封裝的實現(xiàn)代碼
這篇文章主要介紹了Vue?Axios請求取消和重發(fā)的封裝的實現(xiàn),文章通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
Vue.js 的內(nèi)聯(lián)表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。下面這篇文章主要給大家介紹了Vue.js中的計算屬性,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10