vue国际化(中英文切换)

思路：

构建了一个 VueI18n 的实例，明确了默认与备用语言及对应的语言包。在组件中获取组件实例以方便后续操作，设置一个点击事件实现语言切换并触发重新获取消息的动作，ref 创建的 msg 用于存储消息内容，设置一个函数负责消息请求与更新，onMounted 中的操作确保组件挂载后即获取消息。在模板里，展示 msg 并通过 $t 获取国际化翻译文本，同时提供选择框进行语言切换，整体形成了一个完整的国际化功能体系，能灵活切换语言并展示相应的消息和文本，两者紧密配合实现了 Vue 项目中的国际化需求与动态交互。

app.vue

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { requestMsgApi } from "./api/message";

// 获取当前组件实例
const instance = getCurrentInstance();

// 切换语言
const onLanguageChange = (lang) => {
  // 执行语言切换
  instance.proxy.$i18n.locale = lang;
  // 重新获取消息
  requestMessage();
};

// 显示在页面中的消息
const msg = ref("");

async function requestMessage() {
  // 发送请求获取消息
  const response = await requestMsgApi();
  console.log(response.data.msg);
  // 保存消息
  msg.value = response.data.msg;
}

// 组件挂载完成之后
onMounted(() => {
  // 获取消息
  requestMessage();
});
</script>

<template>
  {{ msg }}
  <ul>
    <li>{{ $t("navbar.home") }}</li>
    <li>{{ $t("navbar.about") }}</li>
    <li>{{ $t("navbar.contact") }}</li>
  </ul>
  <select @change="onLanguageChange($event.target.value)">
    <option value="zh-CN">中文</option>
    <option value="en-US">English</option>
  </select>
</template>

utils/request.js

import axios from "axios";
import { i18n } from "../locales";

const request = axios.create({
  baseURL: "http://localhost:3000",
});

// 请求拦截器
request.interceptors.request.use((config) => {
  // 将当前语言设置到请求头中
  config.headers["Accept-Language"] = i18n.global.locale;
  // 返回配置
  return config;
});

export default request;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./locales/index";

const app = createApp(App);
app.use(i18n);
app.mount("#app");

message.js

import request from "../utils/request";

export function requestMsgApi() {
  return request({ url: "/msg" });
}

locales/en-US.json

{
  "navbar": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  }
}

locales/zh-CN.json

{
  "navbar": {
    "home": "首页",
    "about": "关于我们vvvv",
    "contact": "联系方式"
  }
}

locales/index.js

import { createI18n } from "vue-i18n";
import zhCN from "./zh-CN.json";
import enUS from "./en-US.json";

// 创建 VueI18n 实例
export const i18n = createI18n({
  // 设置默认语言为中文
  locale: "zh-CN",
  // 设置备用语言为英文
  fallbackLocale: "en-US",
  // 语言包
  messages: {
    // 引入中文翻译文件
    "zh-CN": zhCN,
    // 引入英文翻译文件
    "en-US": enUS,
  },
});

后端

app.js

const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors());

app.get("/", (req, res) => {
  res.send("welcome");
});

app.get("/msg", (req, res) => {
  // 获取语言
  const lang = req.headers["accept-language"];
  // 根据不同的语言响应不同的内容
  switch (lang) {
    case "zh-CN":
      res.json({ msg: "你好" });
      break;
    case "en-US":
      res.json({ msg: "Hello" });
      break;
    default:
      res.json({ msg: "欢迎" });
  }
});

app.listen(3000, () => {
  console.log(`服务器启动成功, 监听 3000 端口`);
});