vue3+vite使用i8n

1.使用vite+vue3创建项目

npm create vite@latest

根据自己的需求创建对应的项目，我的是 vue + ts的，创建完项目后需要运行一下命令，创建依赖

npm i

2.安装vue-i18n

npm i vue-i18n@9.*

注意：可能你会使用  npm install vue-i18n@next 这个命令去安装，这个命令安装后的版本是最新的，可能跟你当前的vue不兼容会导致错误，我最开始就是使用这个命令安装的，结果使用不了 json 的嵌套，下面会说，如果懒得看可以直接看第6点的注意部分

 3.配置json文件

在 src 目录下创建一个文件夹，例如 locales，然后再在新建的文件夹里面新建两个 json 文件用于区分不同语言，如下是我创建的两个 json 文件

 3.1  zh.json

{
    "hello": "你好，世界！",
    "aa": {
        "bb": "测试"
    }
}

 3.2  en.json

{
    "hello": "Hello, world!",
    "aa": {
        "bb": "test"
    }
}

 4.main里面配置使用i18n

在 main.ts 或者 main.js 中配置使用i18n，取决于你创建项目选择的是js还是ts

import { createApp } from 'vue'
import App from './App.vue'

// i18n
import {createI18n} from 'vue-i18n'
import en from './locales/en.json';
import zh from './locales/zh.json';

const i18n = createI18n({
    locale: 'en', // 设置默认语言为英文
    legacy: false,
    flobalInjection: true,
    fallbackLocale: 'en', // 设置备用语言为英文，以防某些翻译缺失时使用默认语言
    messages: {
        en,
        zh
    }
})

let app = createApp(App)
app.use(i18n)
app.mount('#app')

 5.在组件中使用

注意：我在组件中使用了 el-button 标签，这个需要安装 element-plus 才能使用，具体安装使用请看官网 https://element-plus.org/zh-CN/guide/installation.html

<script setup lang="ts">
  import { useI18n } from 'vue-i18n'; // 引入 useI18n 钩子函数来改变语言环境
  const { t, locale } = useI18n(); // 使用 t 函数进行翻译，locale 来切换语言环境
  const changeLanguage = () => {
    locale.value = locale.value === 'en' ? 'zh' : 'en'; // 切换语言环境为中文或英文
  };
</script>

<template>
  <div>
    <el-button @click="changeLanguage">{{ t('hello') }}</el-button>
    <h1>{{ t('aa.bb') }}</h1>
  </div>
</template>

6.运行结果

使用命令 npm run dev 运行查看运行结果，点击按钮切换不同语言

注意：我使用 npm install vue-i18n@next 这个命令安装的 i18n 时，在运行 npm run dev 时可以正常显示，但是当我 build 之后，也就是用命令 npm run build 命令生成的文件，放到网站上时，测试的那个字段会显示不出来，会变成 aa.bb，它在json文件中的配置看第3点，后面删除src/node_modules文件夹，并删除package.json里面的 vue-i18n，然后重新运行 npm i 和 npm i vue-i18n@9.*，重新安装9版本的 i18n 才能正常显示出来，因为我使用的时vue3，所以用9点几的版本，如果是vue2的话应该用 npm i vue-i18n@8.* 就可以了