Magic Translate vs. vue-i18n

vue-i18n là thư viện i18n tiêu chuẩn cho Vue và @nuxtjs/i18n được xây dựng trên thư viện này cho Nuxt. Giống như hầu hết các thư viện i18n, nó sử dụng một khóa cho mỗi thư và một tập hợp tin nhắn cho mỗi ngôn ngữ. Magic Translate dịch trực tiếp văn bản trong mẫu Vue của bạn, không cần khóa hoặc tệp tin nhắn.

Sơ lược

Mã khác nhau như thế nào

Với vue-i18n, bạn xác định các thông điệp cho từng ngôn ngữ và tham khảo chúng bằng phím:

// i18n.ts
import { createI18n } from 'vue-i18n';

export const i18n = createI18n({
  locale: 'de',
  messages: {
    en: { cart: { title: 'Your shopping cart' } },
    de: { cart: { title: 'Ihr Warenkorb' } }
  }
});

<h2>{{ $t('cart.title') }}</h2>

Với Magic Translate, văn bản vẫn ở trong mẫu:

<h2><T>Your shopping cart</T></h2>

Đối với các thuộc tính như chỗ giữ chỗ, hãy sử dụng useTranslate:

<input :placeholder="t('Search products')" />

Khi nào nên chọn Magic Translate

• Bạn muốn ứng dụng Vue của mình bằng nhiều ngôn ngữ mà không cần quản lý tin nhắn cho từng ngôn ngữ.
• Bạn không có dịch giả hoặc bạn muốn phát hành bản cập nhật mà không cần chờ bản dịch.
• Văn bản của bạn thay đổi thường xuyên và bạn muốn mọi ngôn ngữ được cập nhật.

Khi nào nên chọn vue-i18n

• Tất cả văn bản phải được dịch hoặc xem xét bởi một người.
• Bạn cần các công cụ tìm kiếm để xem HTML đã dịch từ kết xuất máy chủ Nuxt. Magic Translate cho Vue dịch trong trình duyệt.
• Bạn muốn có một thư viện mã nguồn mở miễn phí mà không có dịch vụ bên ngoài.

Chuyển từ vue-i18n sang Magic Translate

Bạn có thể chuyển đổi một thành phần tại một thời điểm. Thay thế $t('key') bằng văn bản tiếng Anh từ thư của bạn, được gói bằng <T> hoặc sử dụng t() từ useTranslate cho các thuộc tính. Cả hai thư viện có thể chạy cạnh nhau trong khi bạn di chuyển. Hướng dẫn Vue hiển thị thiết lập.

Sẵn sàng để thử nó? Làm theo hướng dẫn bắt đầu để dịch thành phần đầu tiên của bạn trong năm phút.