溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
安裝
npm install vue-i18n
新建一個文件夾 i18n ，內新建 en.js zh.js index.js 三個文件
準備翻譯信息
en.js
export default {
home: {
helloworld: "hello workd ！"
}
};
zh.js
export default {
home: {
helloworld: "你好世界"
}
};
index.js
創建Vue-i18n實例
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 根實例
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");
簡單的使用
about.vue
<template>
<div class="about">
<h2>{{ $t("home.helloworld") }}</h2>
<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>
注意：
比如說上面的hi 你要通過這種形式來寫的時候，不能放在data 里面，因為當語言切換的時候 他是不會變的 ，要寫在computed內
總結
以上所述是小編給大家介紹的使用vue 國際化i18n 多實現語言切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
