Vue I18n实现项目国际化

一.安装

在vue-cli项目中安装Vue I18n (vue add i18n),安装成功后根据提示输入文件夹名称,默认语言等配置即可。

二.配置后自动生成文件夹

安装成功后项目中会生成对应的语言包文件夹:

根据输入配置自动生成的文件夹

:此处的 json 文件中建议存放全局使用率较高的词汇;

三.使用
1.组件中定义并使用:

首先在<i18n></i18n>标签声明首先需要进行国际化的变量:

使用标签包含需要进行国际化的变量

声明后在<template></template>中通过$t(‘’)进行使用:
调用方式

2.全局定义并使用:

首先在自动生成的/locals文件夹中建立对应的json文件:

根据业务需求新建语言json

json中变量定义

声明后即可在所有组件中通过$t(‘’)进行使用;

3.在 JavaScript 文件中使用

在js文件中,通过this.$t(‘’)进行使用;

4.Vue I18n官方地址(含详细使用教程及Demo)

http://kazupon.github.io/vue-i18n/zh/

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容