VUE i18n笔记

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')