vue2+elementUI项目国际化踩坑记录

1.前言

• vue-i18n插件npm i vue-i18n
• vscoder中的i18n Ally插件
  
• 目录示例
  
• 有些解决方法是参考各大网友才得到解决的，我也在此记录一下，谢谢大家支持。
• 内容所有示例仅供参考；有些出现问题的地方大家可能没有遇见，忽略就可以；如有写的不足的地方还请大家指正。

2.问题

2.1 data里面数据被页面作为循环体使用

页面示例

<template>
	<div>
		<div v-for="(item,index) in Array" :key="index">
			{{munuI18nFunc(item.title)}}
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			Array: [
				{
					id:1,
					title:'首页'
				},
				{
					id:2,
					title:'滑块'
				}
			],
		}
	},
	mounted() {
	},
	methods: {
		munuI18nFunc(item) {
			if (this.$t('menus.' + item)) {
				return this.$t('menus.' + item)
			}
			return item
		}
	}
}
</script>

翻译文件内容示例

en文件夹下.json文件

{
	"menus": {
	    "首页": "Home",
	    "滑块": "slider"
  	},
}

zh-CN文件夹下.json文件

{
	"menus": {
		  "首页": "首页",
		  "滑块" : "滑块"
	},
}

如果对上述方法感觉麻烦的话可以采用computed方法来解决

<template>
	<div>
		<div v-for="(item,index) in Array" :key="index">
			{{item.title}}
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {}
	},
	computed:{
		Array(){
			return {
				{
					id:1,
					title:this.$t('menus.shou-ye')
				},
				{
					id:2,
					title:this.$t('menus.hua-kuai')
				}
			}
		}
	}
	methods: {}
}
</script>

--------en.json文件
{
	"menus": {
	    "shou-ye": "Home",
	    "hua-kuai": "slider"
  	},
}
-------zh-CN.json文件
{
	"menus": {
		  "shou-ye": "首页",
		  "hua-kuai" : "滑块"
	},
}

2.2 国际化在js文件中的使用

在main.js文件中把Vue对象赋值给一个变量

window.assign = new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

进入需要修改的js文件修改

export const checkListenAddr = ( rule,value,callback) => {
  if(value === ''){
    return callback(new Error(window.assign.$t('activeRule.shu-ru-kong')))
  } else if (value !== ''){
    return callback(window.assign.$t('activeRule.bu-wei-kong'))
  }
  return callback();
}

2.3 切换语言国际化只生效一次

可能是 .vue文件引入方式导致

• 直接引入导致语言切换只生效一次
  import DataManage from "@/components/Home/DataManage.vue";
• 原因 ：个人认为：直接引入页面，语言切换没有让引入的页面重载，导致国际化只生效一次
• 解决：使用按需加载的方式
  const DataManage = () => import('@/components/Home/DataManage.vue')

2.4 props传值-国际化的语言-报错问题

• 方法：

// --------------------错误写法：
 props: {
    labelName: {
      type: String,
      default: this.$t('common.zhong-wen')
    }
  },
// --------------------解决方法：
 props: {
   labelName: {
     type: String,
     //返回值的形式
     default () {
       return this.$t('common.zhong-wen')
     }
   }
 },

2.5 elementUI国际化引入项目

在自己写的i18n.js文件中写入以下代码：(参考官网)

import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
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: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}
const i18n = new VueI18n({
  locale: 'cn', // set locale
  messages, // set locale messages
})

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

2.6 el-form表单验证规则中message使用国际化不起作用

//------------------不起作用:
hobby: [
	{ required: true, message: this.$t('activeRule.shu-ru-kong'), trigger: 'blur' }
]
//-------------------改写：
hobby: [
	{ required: true, validator: (rule, value, callback) => {
		if(!value){
			return callback(new Error(this.$t('activeRule.shu-ru-kong')))
		}
		return callback();
	}, trigger: 'blur' }
]

2.7 国际化locales文件夹下的.json文件命名遇到的坑

• 我自己项目的中英文，文件夹命名为en和zh-CN

• 因此命名.json文件不要出现类似于menu.json和aazh-CNbb

• 因为这两个.json文件名包含了文件夹名，导致英文最终被引入到了中文的语言包中。这个可能跟我个人引入方式有关系，如果大家没有出现请忽略。

3.结束语

欢迎大家评论区留言讨论，如果对您有所帮助，希望给与点赞支持，谢谢！