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óaimport 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ụngthis.$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