Vue-I18n

一、装置 npm install vue-i18n二、应用 在 src 下创立 lang 文件夹。 1、筹备语言包本例我筹备了两种语言包，别离是中文和英文：zn、en。在 lang 下创立两个文件，zn.js 和 en.js。 // zn.jsexport default { main:{ message:"音讯", display:"展现" }};// en.jsexport default { main:{ message:"message", display:"display" }}2、筹备翻译的语言环境在 lang 下创立 index.js，应用如上的两种语言包 import Vue from "vue";import VueI18n from 'vue-i18n'import zn from "./zn"import en from "./en"Vue.use(VueI18n); // 全局注册国际化包 // 筹备翻译的语言环境信息const i18n = new VueI18n({ locale: "zn", // 初始化中文 messages: { "zn":zn, "en":en }}); export default i18n3、实现语言翻译在 main.js 中将 i18n 注入 vue 中 ...

这两天手头的工作是给一个商城我的项目增加多语言。这个商城宏大且简单，是用uniapp+uview ui实现的。商城类的我的项目要增加多语言，不可避免要做大量的文本替换的工作，这么庞杂的一个我的项目怎么能力高效的实现多语言国际化是这篇文章次要要写的货色。 引入vue-i18nvue-i18n是一个vue插件，次要作用就是让我的项目反对国际化多语言，首先咱们在我的项目引入这个插件: cnpm vue-i18nyarn install main.jsimport VueI18n from 'vue-i18n' 增加lang语言文件夹新建zh-cn.json 和 ug.json 封装i18n不便咱们应用新建lang/index.js import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n);const i18n = new VueI18n({ locale:'zh', messages:{ 'zh':require('@/lang/zh-cn.json'), 'en':require('@/lang/ug.json'), }});if (uni.getStorageSync('locale')) { i18n.locale = uni.getStorageSync('locale')} else { i18n.locale = 'zh-cn'}Vue.prototype._i18n = i18n;export default i18nvue中应用 mounted() { if (uni.getStorageSync('locale')) { this.$i18n.locale = uni.getStorageSync('locale') } else { this.$i18n.locale = 'zh-cn' } this.langobj= this.$t('goods'); },js中应用**import i18n from '../../lang/index'**export default { // 手机号 mobile: [{ required: true, message: i18n.t('shopro.qingshurushoujihao'), trigger: ['change', 'blur'] }, { validator: (rule, value, callback) => { return test.mobile(value); }, message: **i18n.t('shopro.shoujihaomageshibuzhengque'),** trigger: ['change', 'blur'] } ],多语言切换js ...