使用vue-i18n做語言切換(使用vue3高階函數setup)

Vue I18n 是 Vue.js 的國際化插件。它可以輕松地將一些本地化功能集成到你的 Vue.js 應用程序中。如何使用i18n做語言切換呢？首先，需要搭建一個vue項目。https://www.cnblogs.com/rogerwu/p/7744476.html

具體搭建方法請參考：Window下基於vue cli4 創建一個vue項目。

一、安裝方法

此處只演示 npm

npm install vue-i18n

 

二、項目結構

 

 

 

 

三、集成方法

1.在src目錄下，新建一個文件夾i18n，然后在i18n目錄下，新建一個index.js，內容如下：

import { createI18n } from 'vue-i18n' //按需加載，引入vue-i18n組件

const i18n = createI18n({
    legacy: false, // 使用CompotitionAPI必須添加這條.
    locale: 'zh', // 首選語言
    fallbackLocale: 'zh', // 備選語言
    globalInjection: true, // 加上這一句 
    // 將其設為true,則所有前綴為$的屬性和方法(只是vue-i18n所攜帶的)將被注入到所有vue組件中.
    // 即在所有組件中都可以使用 $i18n $t $rt $d $n $tm
    //messages,
    //方法一：直接定義messages
    /* messages: {
        "zh": {
            hello: "你好,世界!",
            home: {
                title: "歡迎來到地球!",
            },
        },
        "en": {
            hello: "hello, world!",
            home: {
                title: "Welcome to the Earth!",
            },
        },
    }, */
    //方法二：引用外部配置文件
    messages: {
        "zh": require(`@/i18n/lang/zh.json`),
        "en": require(`@/i18n/lang/en.json`) 
    }
});

export default i18n

 

messages的配置方法有三種

• 在createI18n時使用，直接定義messages內容

 

 

•  在createI18n時使用，引用外部文件，並在外部配置相應內容

 

 

 zh.json

{
    "hello": "你好,世界!!",
    "home": {
        "title": "歡迎來到地球!!"
    }
}

en.json

{
    "hello": "hello, world!!",
    "home": {
        "title": "Welcome to the Earth!!"
    }
}

• 在使用的界面，局部設置messages

 

 

 

2.在main.js下引用i18n下的文件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//引入i18n
import i18n from "./i18n";

const app = createApp(App);
app.use(store);
app.use(router);
app.use(i18n);//使用i18n
app.mount("#app");

 

3.在App.vue界面使用i18n，實現多語言切換

<template>
    <div class="hello-world">
        <!-- 語言切換 -->
        <span>語種：</span>
        <select v-model="locale" @change="changeLang($event)">
            <option value="zh">簡體中文</option>
            <option value="en">English</option>
        </select>
        <!-- t是從執行useI18n函數解構得到函數, hello是自己定義的變量 -->
        <p>{{ t("hello") }}</p>
        <p>{{ t("home.title") }}</p>
        <p>{{ hello }}</p>
        
    </div>
</template>

<script>
    import {computed,reactive,toRefs} from "vue";//導入vue需要使用的組件
    import {useI18n} from "vue-i18n"; //導入並使用

    export default {
        setup() {
            
            const state = reactive({
                locale : 'zh'
            })
            
            const {t, locale} = useI18n({
                // 方法三：傳入messages對象, 里面分別是需要被安排的文字. "zh" - 中文, "en" - 英文, 兩個對象的key必須完全一致.
                messages: {
                    "zh": {
                        hello: "你好,世界!!!",
                        home: {
                            title: "歡迎來到地球!!!",
                        },
                    },
                    "en": {
                        hello: "hello, world!!!",
                        home: {
                            title: "Welcome to the Earth!!!",
                        },
                    },
                },
            });

            // t是一個函數,能在mustache(模板語法)中使用,當然也能在setup函數任何地方使用
            const hello = computed(() => t("hello"));
            
            //切換語言
            const changeLang = (event) => {
                locale.value = event.target.value;
            }

            return {
                ...toRefs(state),
                t,
                hello,
                changeLang
            };
        },
    };
</script>

<style scoped>
</style>

 

四、效果測試（方法三）

 

 demo地址：https://gitee.com/zcgdemo/vue-i18n-demo