当前位置：首页 > news >正文

vue国际化(中英文切换)

news 来源：原创 2024/9/30 1:38:18

思路：

构建了一个 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 端口`);
});