[ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化 多國語言功能

npm install @vue/composition-api
# or
yarn add @vue/composition-api

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false;
Vue.use(VueI18n)
new Vue({
  VueI18n,
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

// src/main.js
import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import { store } from "./store";

const myapp = createApp(App)
myapp.use(store)
myapp.use(router)
myapp.mount("#app");

// src/i18nPlugin.js
import { ref, provide, inject } from "vue";

const createI18n = config => ({
  locale: ref(config.locale),
  messages: config.messages,
  $t(key) {
    return this.messages[this.locale.value][key];
  }
});

const i18nSymbol = Symbol();

export function provideI18n(i18nConfig) {
  const i18n = createI18n(i18nConfig);
  provide(i18nSymbol, i18n);
}

export function useI18n() {
  const i18n = inject(i18nSymbol);
  if (!i18n) throw new Error("No i18n provided!!!");

  return i18n;
}

{
  "//": "src/i18n/tw.json",
  "CreateLinkBtn":  "網址",
  "CreateImageBtn": "圖片",
  "CreateVideoBtn": "影片",
  "CreateAudioBtn": "音檔"
}

{
  "//": "src/i18n/en.json",
  "CreateLinkBtn":  "Link",
  "CreateImageBtn": "Image",
  "CreateVideoBtn": "Video",
  "CreateAudioBtn": "Audio"
}

// src/store/index.js
import { createStore } from "vuex";

export const store = createStore({
  state: {
    lang: null  // 存放使用者選用的語系
  },
  mutations: {
    // 切換語系設定
    setLang (state, value) {
      state.lang = value;
    }
  },
  actions: {},
  modules: {}
});

// src/App.vue
<template>
  <div class="content">
    <router-view></router-view>
  </div>
  <Menu></Menu>
</template>

<script>
  import Menu from '@/components/Menu.vue';
  import { store } from "@/store";
  import { provideI18n } from "@/i18nPlugin";
  import tw from '@/i18n/tw'
  import en from '@/i18n/en'

  export default {
    components: {
      Menu
    },
    setup() {
      let locale = 'tw'
      if (localStorage.getItem('setLang')) {
        locale = localStorage.getItem('setLang');
        store.commit('setLang', locale);
      } else {
        store.commit('setLang', locale);
      }
      provideI18n({
        locale: locale,
        messages: {
          'tw': tw,
          'en': en
        }
      })
    }
  };
</script>

// src/components/Menu.vue
<template>
  <input type="checkbox" id="menu_switch" checked />
  <div class="et-hero-tabs-container nav-container" id="awd-site-nav">
    <router-link to="link" class="et-hero-tab" data-slide="link">{{ i18n.$t('CreateLinkBtn')}}</router-link>
    <router-link to="image" class="et-hero-tab" data-slide="image">{{ i18n.$t('CreateImageBtn')}}</router-link>
    <router-link to="video" class="et-hero-tab" data-slide="video">{{ i18n.$t('CreateVideoBtn')}}</router-link>
    <router-link to="audio" class="et-hero-tab" data-slide="audio">{{ i18n.$t('CreateAudioBtn')}}</router-link>
    <input type="button" value="tw" v-on:click="setLang('tw')" class="et-hero-tab" data-slide="audio" >
    <input type="button" value="en" v-on:click="setLang('en')" class="et-hero-tab" data-slide="audio" >
  </div>
</template>

<script>
  import { useI18n } from "@/i18nPlugin";
  import { store } from "@/store";
  export default {
    name: 'Menu',
    setup() {
      const i18n = useI18n();
      const setLang = (value) => {
        store.commit('setLang', value);
        localStorage.setItem('setLang', value);
        i18n.locale.value = value
      }
      return { i18n, setLang };
    }
  }
</script>