使用 vue-i18n 实现 Vue 的国际化

安装

1. vue2的安装方式

npm install vue-i18n

2. vue3的安装方式

npm install vue-i18n@next -S

使用方法

首先在项目src目录下新建lang文件夹，然后文件夹里需要新建index.js文件去使用vue-i18n，需要注意的是，vue-i18n的版本如果是8版本，语言文件用json，如果是9版本，语言文件用js文件，这里vue2和vue3使用方法有区别

1. vue2

//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
    locale: 'zh_cn',
    messages: {
        'zh_cn': require('@/lang/zh_cn.json'),
        'en_us': require('@/lang/en_us.json')
    }
})

export default i18n

中英文语言文件json版参考：

//中文
{
	"header": {
		"item": ["地图导览", "园区介绍", "寻车指引", "海绵科普", "欢乐游玩", "交通地理", "园区环境"],
		"itemSub": [
			"MAP NAVIGATION",
			"INTRODUCTION INFO",
			"SEARCH GUIDE",
			"SPONGE SCIENCE",
			"HAPPY PLAY",
			"POSITIONING",
			"MEMBER SERVICES"
		]
	},
	"footer": {
		"back": "返回",
		"home": "首页"
	}
}

//英文
{
	"header": {
		"item": [
			"SHOPPING\nGUIDE",
			"PARKING\nSERVICE",
			"GRAND\nFEAST",
			"O' GARDEN\n　",
			"ACTIVITY\nREGISTRATION",
			"COUPONS\n　",
			"CUSTOMER\nSERVICE",
			"MEMBERSHIP\nSERVICE"
		],
		"itemSub": [
			"SHOPPING GUIDE",
			"PARKING SERVICE",
			"GOURMET PARADISE",
			"BOTANIC GARDEN",
			"ACTIVITY COURIER",
			"COUPON",
			"CUSTOMER SERVICE",
			"MEMBER SERVICES"
		]
	}
}

在main.js文件中使用import引入并且参考图片使用：

import i18n from '@/lang/';

引入完成以后就可以使用了，在vuex中新建state属性，以下操作参考图片
第一步：

第二步：

第三步：

//在页面中通过$t('值')的方式来获取语言文件中的值
格式：{{$t('值')}}
//最后通过点击页面中中英文切换的按钮去改变vuex中中英文的状态就可以了

2. vue3
   在src目录下创建lang文件夹，再创建三个文件index.js、zh.js、en.js
   

//index.js
import { createI18n } from 'vue-i18n';
import ZH from './zh.js';
import EN from './en.js';
const messages = {
  zh: { ...ZH  },
  en: { ...EN  },
};

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh',
  messages
});

export default i18n;

中英文语言文件json版参考：

//使用export default导出
//zh.js
export default {
	person: {
		name: '测试',
		age: 30
	},
};
//en.js
export default {
	person: {
		name: 'test',
		age: 30
	},
};

然后在main.ts或main.js文件中引入

import i18n from  './lang/index'
app.use(i18n).mount("#app");

在需要使用的页面引入

在页面中使用，如下：

//页面代码
<template>
	<div class="item" @click="changeLang('zh')">
		中文
	</div>
	<div class="item" @click="changeLang('en')">
		英文
	</div>
	<div style="color: #fff;">{{$t('person.name')}}</div>
</template>
<script setup lang="ts">
	import { useI18n } from "vue-i18n";
	const { locale } = useI18n();
	const changeLang = (val) => {
	  locale.value = val;
	};
</script>

大功告成，点个赞吧！！！