使用vue 国际化i18n 实现多实现语言切换功能

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

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

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;

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");

<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>