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