多语言、国际化

后端

php：ThinkPHP8 多语言

语言包

app/lang/zh-cn.php

'会员管理' => '会员管理'

app/lang/en.php

'会员管理' => 'Member'

使用

lang('会员管理');

配置

.env

[LANG]
# 默认语言：
default_lang = zh-cn

前端

vue：Vue I18n

语言包

src/lang/package/zh-cn.json

  会员管理: "会员管理"

src/lang/package/en.json

  会员管理: "Member"

使用

import i18n from "@/lang/index";
i18n.global.t("会员管理");

<template>
  <el-text>{{ $t("会员管理") }}</el-text>
  <el-form-item :label="$t("会员管理")">
    <el-input v-model="input" />
  </el-form-item>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      input: "",
    };
  },
  created() {
    this.name = this.$t("会员管理");
  },
};
</script>

配置

src/settings.js

language: 'zh-cn',

切换

后端会根据前端请求参数或请求头部的语言变量自动侦测切换语言
src/utils/request.js

// 设置语言
if (tokenType === "header") {
  config.headers["think-lang"] = language;
} else {
  config.params.lang = language;
}