Vue3 接入 i18n 实现国际化多语言

在 Vue.js 3 中实现网页的国际化多语言，最常用的包是 vue-i18n。

第一步，安装一个 Vite 下使用 <i18n> 标签的插件：unplugin-vue-i18n

npm install unplugin-vue-i18n
# 或
yarn add unplugin-vue-i18n

安装完成后，调整 vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
export default defineConfig({
  plugins: [
    vue(),
    VueI18nPlugin({}),
  ],
});

接下来，我们需要创建一个locale文件夹，并在其中创建不同语言的消息文件。例如，我们可以创建一个en.js文件来存储英文消息，内容如下：

export default {
  welcome: 'Welcome to our website!',
  about: 'About Us',
  contact: 'Contact Us'
};

在实际应用中，我们可能会有多个不同语言的消息文件，如en.js、fr.js、zh.js等。这样，根据用户的语言设置，我们可以动态加载相应的语言文件来显示对应的文本。

插件会在构建时自动处理这些消息文件，并将它们注入到应用中，使得你可以使用$t函数来访问翻译的文本。例如，在一个组件的template中：

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('about') }}</p>
    <p>{{ $t('contact') }}</p>
  </div>
</template>

通过以上步骤，我们就成功地在Vue3中实现了国际化（i18n）功能。在应用程序中根据用户的语言设置显示对应的翻译文本，为用户提供更好的体验。