【VUE】i18n-前端国际化

方案一：前端静态资源

Vue2使用方法

1.下载依赖包

npm install vue-i18n --save

2.在项目中src目录下新建文件夹i18n，在其下新建文件夹langs，其中存放各类语言js文件，如en.js、zh_CN.js

内部文件结构为：

 
/**zh.js文件**/
module.exports = {
 menu : {
   home:"首页"
 },
 content:{
   main:"这里是内容"
 }
}
 
/**en.js文件**/
module.exports = {
 menu : {
   home:"home"
 },
 content:{
   main:"this is content"
 }
}

src/i18n/i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zh_CN from './langs/zh_CN/zh_CN';
import en_US from './langs/en/en_US';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(VueI18n);

const messages = {
	en_US: {
		...en_US,
		...enLocale,
	},
	zh_CN: {
		...zh_CN,
		...zhLocale,
	},
};
const i18n = new VueI18n({
	locale: localStorage.lang || 'zh_CN',
	messages,
});

export default i18n;

3.main.js中配置

import i18n from './i18n/i18n'; //i18n国际化

Vue.use(Element, {
	i18n: (key, value) => i18n.t(key, value), //i18n国际化
});

window.vm = new Vue({
	el: '#app',
	i18n, //i18n国际化
	router,
	store,
	render: (h) => h(App),
});

4.页面使用

//页面内
{{$t('system.cancel'}}

window.vm.$i18n.t('system.cancel')


//js
this.$t('system.cancel')

5.注意点：

国际化文案内匹配自定义内容

this.$t('validate.range_length', ['5', '20'])  //请输入长度为{0}到{1}之间的字符 将0-1改为5-20

6.加入设置使VSCode代码编辑器中实时显示中文：

在项目根目录的.vscode文件夹中setting.json中添加

{
	"i18n-ally.localesPaths": ["src/i18n/langs"],
	"i18n-ally.enabledParsers": ["json", "js"], //这个最好加上，如果是其他格式，如ts，不加上就无效了
	"i18n-ally.keystyle": "nested", // 翻译路径格式,
	"i18n-ally.sourceLanguage": "en", // 翻译源语言
	"i18n-ally.displayLanguage": "zh_CN" //显示语言， 这里也可以设置显示英文为en,
	// "i18n-ally.extract.keygenStrategy": "random", // 翻译字段命名采用随机字符 枚举['slug','random','empty']
	// "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
}

7.国际化文案中间某些字段自动匹配

'cancelTips': '确认取消订单"{orderID}"?',

Vue中：

this.$t('order.cancelTips', { orderID: row.id })

Vue3使用方法 

1.src/i18n/i18n.js

import {createI18n} from 'vue-i18n';
import zh_CN from './langs/zh_CN/zh_CN';
import en_US from './langs/en/en_US';
// import enLocale from 'element-ui/lib/locale/lang/en';
// import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

const messages = {
	en_US: {
		...en_US,
		// ...enLocale,
	},
	zh_CN: {
		...zh_CN,
		// ...zhLocale,
	},
};
const i18n =  createI18n({
	locale: localStorage.lang || 'zh_CN',
	messages,
	silentTranslationWarn: true, // 去除国际化警告
});

export default i18n;

2.main.js

import i18n from './i18n/i18n.js'

app.use(i18n)

方案二：后端接口取值

从接口取到数据后，前端使用VueX以及sessionStorage存储国际化字段，并在各页面分别调用。

流程图如下：

1.在App.vue或登录页中，将接口成功取到的json数据存储到VueX中

			let i18nCache = window.sessionStorage.getItem('i18n');

			// 缓存里是否有i18n数据
			if (i18nCache == undefined) {
				//携带语言参数this.lang zh_CN、en_US
				getWebI18n(this.lang).then((response) => {
					if (response.code === 200) {
						// 是否成功接收到数据
						if (response.data !== null) {
							if (this.lang === 'zh_CN') {
								window.sessionStorage.setItem(
									'i18n',
									JSON.stringify(response.data.zh_CN)
								);
							} else if (this.lang === 'en_US') {
								window.sessionStorage.setItem(
									'i18n',
									JSON.stringify(response.data.en_US)
								);
							}
							this.$store.dispatch(
								'tagsView/updatei18n',
								JSON.parse(i18nCache)
							);
						}
						history.go(0);
					}
				});
			} else {
				// 缓存有数据，放到VueX里
				this.$store.dispatch('tagsView/updatei18n', JSON.parse(i18nCache));
			}

2.VueX中

const state = {
    i18n: {},
};

const mutations = {
    UPDATE_i18n: (state, view) => {
        console.log(state, view, 'vuex');
        state.i18n = view;
    },
};

const actions = {
    updatei18n({ commit }, view) {
        commit('UPDATE_i18n', view);
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};

3.页面中使用

<template>
	<div id="app">
		<!-- *{{ i18n.export }}*  -->
		*{{ $store.state.i18n.export}}*
	</div>
</template>

4.或通过直接修改zh_CN.js文件来全局最小修改取值

let data = window.sessionStorage.getItem('i18n')
let zh_CN
if (data === null) {
     zh_CN = {
        login: {
        'title': '登录',
        'slider': '请按住滑块，拖动到最右边',
    }}
} else {
     zh_CN =  JSON.parse(data) 
}

 export default zh_CN

常用使用方式

1.动态匹配

5秒后刷新...

其中数字为动态变化的5.4.3.2.1

		//倒计时5秒刷新页面
		let timer = setInterval(() => {
			this.sec--;
			if (this.sec === 0) {
				clearInterval(timer);
				this.logOutRemove();
			} else {
				this.msg = this.$t('common.refresh', [this.sec]);
			}
		}, 1000);

	data() {
		return {
			msg: '',
			sec: 6,
		};
	},

1.匹配\n后自动换行

'keyName':'这是第一行文字 \n这里是第二行文字',

css中添加

white-space: pre-line;


// 如果要使el-tooltip中含有/n时换行，需添加这个样式
.el-tooltip__popper {
	white-space: pre-line;
}