Close

Vue

使用vue i18n建置多國語言網站

2019-08-252020-07-17 second9040

因為之後工作會用到，
剛好假日有時間，就先來看看如何使用vue i18n建置出一個多國語言網站。

先看看官網
其實已經寫得蠻清楚了，再來做一些小設定即可。

下面就是所謂的小設定，初步的做出一個多國語言網站的雛型。
因為自己在家裡弄的，沒有後端資料可接，這邊先做靜態的。

成品長這樣：
vue i18n

code:

<div id="app">
　<button>English</button>
　<button>日本語</button>
　<button>简体中文</button>
　<button>繁體中文</button>
　<div style="font-size: 25px;">{{ $t("message.hello") }}</div>
　<button style="height: 25px; margin-top: 3px;">
　　{{ $t("message.testBtn") }}
　</button>

　<table style="margin: 6px; border-collapse: collapse;" border="1">
　　<tbody>
　　　<tr>
　　　　<td>{{ $t("message.index") }}</td>
　　　　<td>{{ $t("message.number") }}</td>
　　　　<td>{{ $t("message.height") }}</td>
　　　　<td>{{ $t("message.weight") }}</td>
　　　　<td>{{ $t("message.grade") }}</td>
　　　</tr>
　　　<tr>
　　　　<td>1</td>
　　　　<td>Apple</td>
　　　　<td>150</td>
　　　　<td>40</td>
　　　　<td>100</td>
　　　</tr>
　　</tbody>
　</table> 
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 
<script>
// If using a module system (e.g. via vue-cli), 
// import Vue and VueI18n and then call Vue.use(VueI18n).
// import Vue from 'vue'
// import VueI18n from 'vue-i18n' 
// Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
  en: {
    message: {
      hello: 'hello world',
      testBtn: 'testbutton',
      index: 'index',
      number: 'number',
      height: 'height',
      weight: 'weight',
      grade: 'grade',
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界',
      testBtn: 'テストボタン',
      index: '序文',
      number: '座席番号',
      height: '身長',
      weight: '重さ',
      grade: 'スコア',
    }
  },
  sc: {
    message: {
      hello: '你好世界',
      testBtn: '测试按钮',
      index: '序',
      number: '座号',
      height: '身高',
      weight: '体重',
      grade: '成绩',
    }
  },
  tc: {
    message: {
      hello: '你好世界',
      testBtn: '測試按鈕',
      index: '序',
      number: '座號',
      height: '身高',
      weight: '體重',
      grade: '成績',
    }
  },
}

// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'en', // set locale
    messages, // set locale messages
})

// Create a Vue instance with `i18n` option
let vm = new Vue({
    i18n, 
    methods: {
        en() {i18n.locale = 'en'},
        ja() {i18n.locale = 'ja'},
        sc() {i18n.locale = 'sc'},
        tc() {i18n.locale = 'tc'},
    }
}).$mount('#app')

// Now the app has started!
</script>

<style>
td {
    padding: 5px;
}
</style>

相關