fix 修改国际化文件名称不规范问题，增加reqeust 国际化配置

LiuHao

2023-04-19 20f64b54d55603a63bbae959dbf3112de8a96c5f

fix 修改国际化文件名称不规范问题，增加reqeust 国际化配置

 src/components/LangSelect/index.vue

@@ -5,8 +5,8 @@
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> 中文 </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'zh_CN'" command="zh_CN"> 中文 </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en_US'" command="en_US"> English </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
@@ -20,14 +20,15 @@
const appStore = useAppStore();
const { locale } = useI18n();

function handleLanguageChange(lang: string) {

const message: any = {
  zh_CN: '切换语言成功！',
  en_US: 'Switch Language Successful!',
}
const handleLanguageChange = (lang: string) => {
  locale.value = lang;
  appStore.changeLanguage(lang);
  if (lang == 'en') {
    ElMessage.success('Switch Language Successful!');
  } else {
    ElMessage.success('切换语言成功！');
  }
  ElMessage.success(message[lang] || '切换语言成功！');
}
</script>


 src/lang/en_US.ts

 src/lang/index.ts

@@ -2,16 +2,16 @@
import { createI18n } from 'vue-i18n';

// 本地语言包
import enLocale from './en';
import zhCnLocale from './zh-cn';
import enUSLocale from './en_US';
import zhCNLocale from './zh_CN';
import Cookies from 'js-cookie';

const messages = {
  'zh-cn': {
    ...zhCnLocale
  zh_CN: {
    ...zhCNLocale
  },
  en: {
    ...enLocale
  en_US: {
    ...enUSLocale
  }
};

@@ -33,7 +33,7 @@
      return locale;
    }
  }
  return 'zh-cn';
  return 'zh_CN';
};

const i18n = createI18n({

 src/lang/zh_CN.ts

 src/store/modules/app.ts

@@ -1,6 +1,6 @@
import Cookies from 'js-cookie';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import zhCN from 'element-plus/es/locale/lang/zh-cn';
import enUS from 'element-plus/es/locale/lang/en';

export const useAppStore = defineStore('app', () => {
  const sidebarStatus = Cookies.get('sidebarStatus');
@@ -11,14 +11,18 @@
  });
  const device = ref<string>('desktop');
  const size = ref(Cookies.get('size') || 'default');

  // 语言
  const language = ref(Cookies.get('language'));
  const languageObj: any = {
    en_US: enUS,
    zh_CN: zhCN
  };
  const locale = computed(() => {
    if (language.value == 'en') {
      return en;
    } else {
      return zhCn;
    if (!language.value) {
      return zhCN;
    }
    return languageObj[language.value];
  });

  const toggleSideBar = (withoutAnimation?: boolean) => {

 src/utils/i18n.ts

@@ -1,8 +1,12 @@
// translate router.meta.title, be used in breadcrumb sidebar tagsview
import i18n from '@/lang/index';

export const translateRouteTitleI18n = (title: string): string => {
  // 判断是否存在国际化配置，如果没有原生返回
/**
 * 获取国际化路由，如果不存在则原生返回
 * @param title 路由名称
 * @returns {string}
 */
export const translateRouteTitle = (title: string): string => {
  const hasKey = i18n.global.te('route.' + title);
  if (hasKey) {
    const translatedTitle = i18n.global.t('route.' + title);

 src/utils/request.ts

@@ -7,14 +7,13 @@
import { errorCode } from '@/utils/errorCode';
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
import FileSaver from 'file-saver';
import { getLanguage } from '@/lang';

let downloadLoadingInstance: LoadingInstance;
// 是否显示重新登录
export const isRelogin = { show: false };

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 对应国际化资源文件后缀
axios.defaults.headers['Content-Language'] = 'zh_CN';
// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
@@ -24,6 +23,9 @@
// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 对应国际化资源文件后缀
    config.headers['Content-Language'] = getLanguage();

    const isToken = (config.headers || {}).isToken === false;
    // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;