使用vue 國(guó)際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語(yǔ)言切換功能

更新時(shí)間：2018年10月11日 08:39:51 作者：huangenai

這篇文章主要介紹了使用vue 國(guó)際化i18n 多實(shí)現(xiàn)語(yǔ)言切換功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

安裝

npm install vue-i18n

新建一個(gè)文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個(gè)文件

準(zhǔn)備翻譯信息

en.js

export default {
 home: {
 helloworld: "hello workd ！"
 }
};

zh.js

export default {
 home: {
 helloworld: "你好世界"
 }
};

index.js

創(chuàng)建Vue-i18n實(shí)例

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en";
import zhLocale from "./zh";
Vue.use(VueI18n);
const i18n = new VueI18n({
 locale: localStorage.lang || "zh",
 messages: {
 en: {
  ...enLocale
 },
 zh: {
  ...zhLocale
 }
 }
});
export default i18n;

i18n 掛載到 vue 根實(shí)例

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./assets/i18n/index";
Vue.config.productionTip = false;
Vue.prototype.$i18n = i18n;
new Vue({
 router,
 store,
 i18n,
 render: h => h(App)
}).$mount("#app");

簡(jiǎn)單的使用

about.vue

<template>
 <div class="about">
 <h1>{{ $t("home.helloworld") }}</h1>
 <button @click="changeLang()">切換英文</button>
 <p>{{hi}}</p>
 </div>
</template>
<script>
export default {
 data: function() {
 return {};
 },
 computed: {
 hi() {
  return this.$t("home.helloworld");
 }
 },
 methods: {
 changeLang() {
  this.$i18n.locale = "en";
 }
 }
};
</script>

注意：

比如說(shuō)上面的hi 你要通過(guò)這種形式來(lái)寫(xiě)的時(shí)候，不能放在data 里面，因?yàn)楫?dāng)語(yǔ)言切換的時(shí)候他是不會(huì)變的，要寫(xiě)在computed內(nèi)

總結(jié)

以上所述是小編給大家介紹的使用vue 國(guó)際化i18n 多實(shí)現(xiàn)語(yǔ)言切換功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法
這篇文章主要介紹了解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
關(guān)于Vue單頁(yè)面骨架屏實(shí)踐記錄
這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面骨架屏實(shí)踐的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-12-12
VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案
這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案,如果不需要做子表格的分頁(yè)查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下
2024-01-01
Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖
這篇文章主要為大家詳細(xì)介紹了Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開(kāi)路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧
2024-05-05
Element中Select選擇器的實(shí)現(xiàn)
本文主要介紹了Element中Select選擇器的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
干貨!教大家如何選擇Vue和React
Vue和React之間如何選擇，這篇文章主要為大家詳細(xì)介紹了Vue和React兩者之間的相同之處，教大家該如何進(jìn)行選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
在我們編寫(xiě)css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue插件v-touch的坑及解決(不能上下滑動(dòng))
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線,?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下
2022-04-04