疑问：vue-i18n

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

开始

安装

兼容性说明

直接下载 / CDN

NPM

npm install vue-i18n

Yarn

• 在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

Vue Cli 3.x

• 注释：在@vue/cli创建的项目中添加i18n插件，vue需要全局安装，未全局安装的话可以通过vue ui来进行插件安装
• 注释：安装的插件会生成相应的文件和配置文件

vue add i18n

开发版构建

格式化

具名格式

const messages = {
  en: {
    message: {
      hello: '{msg} world'
    }
  }
}
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

列表格式

const messages = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}
<p>{{ $t('message.hello', ['hello']) }}</p>
// 列表格式也接受类似数组的对象：
<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>

HTML 格式化

const messages = {
  en: {
    message: {
      hello: 'hello <br> world'
    }
  }
}
<p v-html="$t('message.hello')"></p>

支持 ruby on rails 的 i18n 格式

• 注释：一种模板语法的写法

const messages = {
  en: {
    message: {
      hello: '%{msg} world'
    }
  }
}
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

自定义格式