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