2020 年 9 月 16 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

使用Vue-cli 3.x 實作 i18n 多國語系網站

1 min read
vue-i18n

使用Vue-cli 3.x 實作 i18n 多國語系網站

 

  • 安裝 vue-i18n

繼  在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 後,接下來要實作 i18n 多國語系網站,npm 安裝的方式,指令是 npm install vue-i18n ,在 Vue i18n 官方文件中有提供 Vue-cli 3 專用的 vue add i18n指令

PS nodejs\vue2-apps> vue add i18n

�  Installing vue-cli-plugin-i18n...

+ [email protected]
added 17 packages from 15 contributors and audited 1631 packages in 80.325s

55 packages are looking for funding
  run `npm fund` for details

✔  Successfully installed plugin: vue-cli-plugin-i18n

? The locale of project localization. en
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? No

安裝完後,由下圖可以知道 vue add i18n指令幫我們作了很多事,實在太方便了

vue-i18n

 

  • 在目錄 locales 下建置語言檔

en-US.json

{
  "I18N_MESSAGE": "hello i18n !!",
  "SYSTEM": {
    "APP_NAME": "Vue2 App",
    "LOGIN" : "Login" ,
    "USER_NAME" : "User Name",
    "PASSWORD" : "Password"
  }
}

zh-TW.json

{
  "I18N_MESSAGE": "您好 i18n !!",
  "SYSTEM": {
    "APP_NAME": "Vue2 應用系統",
    "LOGIN" : "登入" ,
    "USER_NAME" : "帳號",
    "PASSWORD" : "密碼"
  }
}

 

  • 使用 i18n

接著就能在任何一個組件中,使用 $t(‘鍵’) 的方式直接取得在 tw.json 或 en.json 中輸入的值

views\Hello.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">    
    <HelloWorld :msg="$t('I18N_MESSAGE')" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

components\HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ $t('I18N_MESSAGE') }} - {{ $t('SYSTEM.APP_NAME') }} </h2>  
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

 

  • 預設語系及切換

main.js

可以使用 i18n.locale = navigator.language; 來依流覽器的語系自動作預設語系

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/axios.js'
import './plugins/primevue.js'
import i18n from './i18n'


Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

i18n.locale = navigator.language;

可以參考 Vue.js 父子組件間的溝通 – $emit / $on 在 component  上製作按鈕,來對語系作切換

LayoutTopBar.vue

<template>
<h5>Language</h5>
<div class="p-formgroup-inline">
 <div class="p-field-radiobutton">
  <RadioButton id="EN" name="locale" value="en-US" v-model="d_localeMode" @change="changeLocale($event, 'en-US')" />
  <label for="EN">EN</label>
 </div>
 <div class="p-field-radiobutton">
  <RadioButton id="TW" name="locale" value="zh-TW" v-model="d_localeMode" @change="changeLocale($event, 'zh-TW')" />
  <label for="TW">TW</label>
 </div>
</div>
</template>

<script>
methods: {
  changeLocale(event, localeMode) {
    this.$emit('locale-change', localeMode);
    event.preventDefault();
  },
}
</script>

 

App.vue

<template>
<LayoutTopBar @menu-toggle="onMenuToggle" :localeMode="localMode" @locale-change="onLocalChange" />
</template>

<script>
import i18n from './i18n';
import LayoutTopBar from './containers/LayoutTopbar.vue';

export default {
  data() {
    return {
      localMode: navigator.language,
    };
  },
  method() {
    onLocalChange(localMode) {
      this.localMode = localMode;
      i18n.locale = localMode;
    },
  }
</script>

 

Copyright © All rights reserved. | Newsphere by AF themes.