vue中 使用 vue-i18n 切換中英文

兼容性：

支持 Vue.js 2.x 以上版本

安裝方法：

npm install vue-i18n

1、準備本地的翻譯信息

const messages = {
    zh: {
      message: {
        hello: '好好學習，天天向上！'
      }
    },
    en: {
      message: {
        hello: 'good good study, day day up!'
      }
    }
}

2、創建帶有選項的 VueI18n 實例

const i18n = new VueI18n({
    locale: 'en', // 語言標識
    messages
})

3、在 main.js 中引入 vue-i18n （前提是要先引入 vue），並把 i18n 掛載到 vue 根實例上

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)


const app = new Vue({
    router,
    i18n,
    ...App
}).$mount('#app')

5、在 HTML 模板中使用

​​​​​​​<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>