I18n | Laravue

Trang chủ » Cách Dùng I18n » I18n | Laravue

Có thể bạn quan tâm

# I18n

Laravue cung cấp giải pháp đa ngôn ngữ sử dụng vue-i18n .

Ngôn ngữ hiện tại sẽ được lưu vào cookie đồng thời ghi nhớ cấu hình cài đặt của ngôn ngữ để cho lần truy cập sau.

# Ngôn ngữ chung toàn hệ thống

Các file ngôn ngữ nằm ở thư mục @/lang , bao gồm tiếng Việt, tiếng Anh, tiềng Trung Quốc, tiếng Nga. Các ngôn ngữ mặc định của element-ui được import vào ở @/lang/index.js.

# Ngôn ngữ riêng trong từng page/component

Có một vài page hay component có thể có ngôn ngữ riêng, ví dụ trang @/views/i18n. Bạn có thể sử dụng bằng phương thức mergeLocaleMessage:

import local from './local'; this.$i18n.mergeLocaleMessage('en', local.en); this.$i18n.mergeLocaleMessage('vi', local.vi); # Sử dụng $t trong javascript

Nếu bạn sử dụng component ví dụ select, bạn có thể dịch trước các giá trị bằng this.$t trong code js rồi truyền value vào v-for, ví dụ:

<el-select v-model="value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/> </el-select> created() { this.options = [ { value: '1', label: this.$t('i18nView.one'), }, { value: '2', label: this.$t('i18nView.two'), }, { value: '3', label: this.$t('i18nView.three'), }, ] }

Trong ví dụ trên, do this.options được khai báo trong hàm created() nên i18n chỉ thực thi 1 lần duy nhất trong quá trình rendering. Khi giá trị local lang thay đổi, this.options sẽ không thay đổi theo. Nếu bạn muốn this.options cập nhật các thay đổi của local lang, thì bạn có thể sử dụng watch:

export default { watch: { lang() { this.setOptions(); }, }, methods: { setOptions() { this.options = [ { value: '1', label: this.$t('i18nView.one'), }, { value: '2', label: this.$t('i18nView.two'), }, { value: '3', label: this.$t('i18nView.three'), } ] }, }, }

# Loại bỏ i18n

Nếu ứng dụng của bạn không cần sử dụng i18n, bạn có thể xóa ra bằng cách:

  • Trong file @resources/js/main.js xóa import i18n from './lang' đồng thời xóa luôn thư mục @resources/js/lang.
  • Điều chỉnh code của hàm generateTitle (source code ) để không sử dụng this.$te (ví dụ trả về value trực tiếp)
  • Xóa this.$t('xxx.yyy') trong @resources/js/views/i18n/index.vue、@resources/js/views/role-permission/List.vue、@resources/js/views/permission/components/SwitchRoles.vue và các chỗ khác

Từ khóa » Cách Dùng I18n