是不是見到google，facebook等大型專業網站的擁有不同的語言站群，可以不同語言間切換很給力
今天要介紹的就是如何識別不同國家語言，只需要簡單幾步，使你的web應用更有國際范，
安裝vue-i18n
npm i vue-i18n --save
npm i vue-i18n --save
新建多語言json檔案
在src目錄下新建 config檔案夾 和 子檔案夾languages
新建語言檔案 en-US.json 和 th-TH.json
en-US.json
{
//全域
"Global":{
"Title":"Global"
},
//對應頁面
"Home":{
"Title""Home"
}
}
th-TH.json //泰語包
{
//全域
"Global":{
"Title":"Global"
},
//對應頁面
"Home":{
"Title""Home"
}
}
在main.js檔案中引入vue-i18n
//語言包
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
//獲取瀏覽器語言標識
const navLang = navigator.language || navigator.userLanguage;
let localLang = "en-US"; //本地開發語言包
let lang = navLang || "en-US"; //實際語言包
localStorage.setItem("lang", lang);
const i18n = new VueI18n({
locale: process.env.NODE_ENV == "dev" ? localLang : lang,
messages: {
en: require("./config/languages/en-US.json"),
enUS: require("./config/languages/en-US.json"),
th: require("./config/languages/th-TH.json"),
"th-TH": require("./config/languages/th-TH.json"),
"en-US": require("./config/languages/en-US.json")
}
});
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
//語言包
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
//獲取瀏覽器語言標識
const navLang = navigator.language || navigator.userLanguage;
let localLang = "en-US"; //本地開發語言包
let lang = navLang || "en-US"; //實際語言包
localStorage.setItem("lang", lang);
const i18n = new VueI18n({
locale: process.env.NODE_ENV == "dev" ? localLang : lang,
messages: {
en: require("./config/languages/en-US.json"),
enUS: require("./config/languages/en-US.json"),
th: require("./config/languages/th-TH.json"),
"th-TH": require("./config/languages/th-TH.json"),
"en-US": require("./config/languages/en-US.json")
}
});
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
在頁面中使用
//在HTML中使用
<div >
{{$t('Global.Title')}}
</div>
//在JS中使用
let title = this.$t('Global.Title')
//在HTML中使用
<div >
{{$t('Global.Title')}}
</div>
//在JS中使用
let title = this.$t('Global.Title')
主動切換語言
this.$i18n.locale = "th-TH"
this.$i18n.locale = "th-TH"
服務端回傳提示可根據 HTTP 請求頭中的 Accept_language 判斷語言標識回傳對應的語種提示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500588.html
標籤：其他
下一篇：計時器一直回圈無法清除的問題