官网
http://kazupon.github.io/vue-i18n/zh/introduction.html
https://vuetifyjs.com/en/features/internationalization/#creating-a-translation
介绍
Vue I18n 是 Vue.js 的国际化插件。
安装
cdn
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
npm
npm install vue-i18n
yarn
yarn add vue-i18n
vue-i18n 在 vue 单页面中使用
index.html 可以直接在浏览中运行, 如下效果
<!DOCTYPE html> <html> <head> <title>vue-i18n</title> </head> <body> <div id="app"> {{msg}} <br /><br /> 语言选择：<select v-model="selected" @change="changeLang()"> <option value="en">English</option> <option value="zh">简体中文</option> </select> Selected: {{selected}} <br /><br /> <p>{{$t("message.hello")}}</p> <ul> <li v-for="(item, key) in items" :key="key">{{item.title}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> <script> // 国际化内容配置 const messages = { en: { message: { hello: "hello world", li1: "li1", li2: "li2", li3: "li3", }, }, zh: { message: { hello: "你好 世界", li1: "标签一", li2: "标签二", li3: "标签三", }, }, }; const i18n = new VueI18n({ locale: "en", messages, }); var app = new Vue({ el: "#app", i18n, data: { msg: "Hello Vue i18n", selected: "en", }, computed: { // 重点：vue 列表数据国际化处理，必须在 computed 中绑定 items: function () { return [ { title: this.$t("message.li1"), // 获取 i18n 配置数据 }, { title: this.$t("message.li2"), }, { title: this.$t("message.li3"), }, ]; }, }, methods: { // 切换语言配置 changeLang() { i18n.locale = this.selected }, }, }); </script> </body> </html>
vue-i18n 在 vue，vuetify 项目中使用
src/plugins/vuetify.js 中引入 vue-i18n, 设置后导出
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import colors from 'vuetify/lib/util/colors' import VueI18n from 'vue-i18n' Vue.use(Vuetify) Vue.use(VueI18n) // 国际化显示配置 const messages = { en: { $vuetify: { examplesButton: 'Examples', sidebar: { title1: { value: 'Basic', children: { title1: { value: 'HelloWorld' }, title2: { value: 'UpdateEnterExit' }, title3: { value: 'GeneralUpdatePatternI' }, title4: { value: 'SelectElementAndBindData' }, title5: { value: 'SelectInsertRemove' } } } } } }, zh: { $vuetify: { examplesButton: '示例', sidebar: { title1: { value: '基础', children: { title1: { value: '你好，世界' }, title2: { value: '更新、添加、退出' }, title3: { value: '生成、更新 I' }, title4: { value: '选择元素并绑定数据' }, title5: { value: '选择、添加、移除' } } } } } } } // 默认语言 en, 项目使用 sessionStorage 做语言记录 let i18nLocale = 'en' if (sessionStorage.getItem('i18nLocale')) { i18nLocale = sessionStorage.getItem('i18nLocale') } // 实例化 vuei18n const i18n = new VueI18n({ locale: i18nLocale, messages }) const opts = { theme: { dark: false, themes: { light: { primary: '#409eff', secondary: '#54a8ff', accent: '#9c27b0', error: '#f44336', warning: '#ff5722', info: '#607d8b', success: '#4caf50' }, dark: { primary: colors.blue.darken1 } } }, // vuetify 配置中添加 i18n lang 配置 lang: { t: (key, ...params) => i18n.t(key, params) } } const vuetify = new Vuetify(opts) // 导出 i18n export { vuetify, i18n }
设置单个按钮国际化文本, 注意： vuetify 中的模板和常规 vue 项目中的模板不一致
{{$vuetify.lang.t('$vuetify.examplesButton')}}
设置列表国际化处理，列表为通过 Data 动态生成的，Data 数据必须写在 computed 中
... computed: { // 动态侧边栏 items: function () { return [ { icon: 'mdi-alpha-b-box-outline', title: this.$vuetify.lang.t('$vuetify.sidebar.title1.value'), // 侧边栏菜单项 children: [ // 菜单子项 { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title1.value'), path: '/examples/helloworld' }, { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title2.value'), path: '/examples/updateenterexit' }, { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title3.value'), path: '/examples/generalupdatepattern' }, { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title4.value'), path: '/examples/selectelementbinddata' }, { title: this.$vuetify.lang.t('$vuetify.sidebar.title1.children.title5.value'), path: '/examples/selectinsertremove' } ], appendIcon: 'mdi-chevron-down', active: true }, ...
效果例子
完整项目地址
https://github.com/gywgithub/vue-d3-examples
