I18n基础
kazupon/vue-i18n
Github状态
Start 3k+，Fork <1k+
简介
Vue I18n是Vue.js的国际化插件。 它可以轻松地将一些本地化功能集成到您的Vue.js应用程序中。
特性：
各种格式本地化
多元化
DateTime本地化
号码本地化
基于组件的本地化
分量插值
后备本地化
项目体验
| 使用评价 |
| 基础功能 |
| 完美支持多语言。 |
| 项目使用 |
| 技术支持 |
框架资源
| I18n |
| Github |
| https://github.com/kazupon/vue-i18n |
| 官网 |
| https://kazupon.github.io/vue-i18n/ |
| Doc |
| https://kazupon.github.io/vue-i18n/ |
| Demo |
| https://kazupon.github.io/vue-i18n/ |
| Blog |
|
|
Demo运行
npm install vue-cli -g
npm/yarn install
npm run dev
i18n集成
i18n Vue配置
集成到VUE工程(全局) ref
| I18n集成 |
| Vue工程 |
| npm install vue-i18n |
| 依赖 |
| main.js |
| import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./locales/zh'), // zh.json 'en': require('./locales/en') } }) new Vue({ el: '#app', i18n, components: {App}, template: '<App/>' }) |
zh.json
| { "lang": { "name": "I18n本地化" }, "links": { "docs": "Documentation", "github": "GitHub" } } |
集成到VUE工程(单组价) ref
| I18n集成 |
| Vue工程 |
| npm i --save-dev @kazupon/vue-i18n-loader |
| 依赖 |
| vue-loader.conf.js |
| const loaders = utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction, i18n: '@kazupon/vue-i18n-loader' }) // i18n单组件支持 const i18n = '@kazupon/vue-i18n-loader' // 国际化 loaders.i18n = i18n |
I18n的文本定义
| // 全局 // 单组件 <i18n> { "zh": { "vd.ii.card.tv": "浏览器" }, "en": { "vd.ii.card.tv": "Browser" } } </i18n> |
I18n的访问
| // html <div>{{$t('lang.name')}}</div> // JavaScript this.$t('lang.name') |