[Vue.js] vue-i18n 實現多語系

快速使用

假設你已經安裝 Vue cli 3.x，你可以直接到專案裡執行：

vue add i18n

接著會詢問你預設的語言、備用語系(fallbackLocale)及字典檔的目錄，所謂的備用語系指的是當使用者選擇語言的字典檔有缺時，會採用哪個語言的資料替代。

若按照預設值執行的話，可以確認一下專案是否出現目錄 /[Your Project]/src/locales/ ，裡面有個 en.json 英文的字典檔。

這個方法相關的設定已經自動完成，可以直接在 template 上使用：

{{ $t('message') }}

安裝及設定

Step 1: 安裝套件

npm install vue-i18n

Step 2: 新建目錄及字典檔

mkdir locales

新增目錄 /[Your Project]/src/locales/ ，加入第一個字典檔 en.json 。

{
  "hello": "Hello!"
}

接著 index.js

import en from './en';

export const messages = {
    en,
};

你也可以在 locales/ 下繼續新增其他語系

Step 3: 設定

新增 i18n.js 設定 locale 預設語言及 fallbackLocale 備用語言等，messages 是所有語系的字典檔。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {messages} from './locales';

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages, // set locale messages
});

將設定加入 main.js

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

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

試著在 template 上使用：

{{ $t('hello') }}

上述的檔案完成後，專案的架構如下列所示：

./src/
├── App.vue
├── i18n.js
├── locales
│   ├── en.json
│   └── index.js
└── main.js

更多的安裝資訊可以參考[文件]

進階使用

切換語系

在 root 更改設定值

$i18n.locale

備用語系

可依據各語言設定，可接受傳入字串、陣列、物件等

fallbackLocale

[Django] 支援多國語言的網站

internationalization(國際化)被簡寫為i18n，因為字首i和字尾n的中間共有18個字母。

安裝相關軟體

sudo apt-get install gettext

修改settings.py，在MIDDLEWARE加上所需的套件，LANGUAGES列出支援哪些語言，LOCALE_PATHS則是將語言的翻譯包儲存的路徑。

# project/settings.py
MIDDLEWARE = [
    ...,

    'django.middleware.locale.LocaleMiddleware',
]


LANGUAGES = (
    ('zh-tw', '繁體中文'),
    ('en', 'English'),
)
LOCALE_PATHS = (
    os.path.join(BASE_DIR, 'locale'),
)

新增一個html的模板，記得加入i18n的tag，頁面內想翻譯的字詞標註起來。另外在url的設定裡，將所有頁面區分成多個語言，也就是原先的路徑http://your.ip.address/welcome，可由http://your.ip.address/en/welcome來檢視英文版網站，中文網站則是打開http://your.ip.address/zh-tw/welcome。

# templates/index.html
{% load i18n %}

{% trans '一起唱DoReMi' %}

設定url

# myapp/views.py
def index(request):
    return render(request, 'index.html', {})

# project/urls.py
from myapp import views
from django.conf.urls.i18n import i18n_patterns
urlpatterns = i18n_patterns(
    path('', views.index, name='index'),
)

標註好想翻譯的字詞或段落後，請透過下列指令產生翻譯文件。

python manage.py makemessages -l en
python manage.py makemessages -l zh_TW

此時在locale資料夾內，會找到產生的檔案，msgid是你標註的字詞，請在msgstr寫入翻譯。針對重複的id，在文件內只能設定一種翻譯。

# locale\en\LC_MESSAGES\django.po
msgid "一起唱DoReMi"
msgstr "singing DoReMi together"

# locale\zh_TW\LC_MESSAGES\django.po
msgid "一起唱DoReMi"
msgstr "一起唱DoReMi"

翻譯完成後，將翻譯包編譯出*.mo

python manage.py compilemessages -l en
python manage.py compilemessages -l zh_TW

可以參考一下完成編譯的檔案結構

locale/
├── en
│   └── LC_MESSAGES
│       ├── django.mo
│       └── django.po
└── zh_TW
    └── LC_MESSAGES
        ├── django.mo
        └── django.po

4 directories, 4 files

這時就可以開啟瀏覽器查看成果囉！
http://your.ip.address/en/
http://your.ip.address/zh-tw/