import{_ as s,c as n,o as a,a as l}from"./app.2b769fcb.js";const i=JSON.parse('{"title":"i18n \u6587\u672C\u591A\u8BED\u8A00\u89E3\u51B3\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B9A\u4E49\u56FE\u7247\u7684\u76EE\u5F55\u683C\u5F0F","slug":"\u5B9A\u4E49\u56FE\u7247\u7684\u76EE\u5F55\u683C\u5F0F"},{"level":2,"title":"HTML\u7684\u4F7F\u7528\u65B9\u5F0F","slug":"html\u7684\u4F7F\u7528\u65B9\u5F0F"}],"relativePath":"guide/vue3/i18n.md","lastUpdated":1661153879000}'),p={name:"guide/vue3/i18n.md"},o=l(`

i18n \u6587\u672C\u591A\u8BED\u8A00\u89E3\u51B3\u65B9\u6848

javascript
import { createI18n } from 'vue-i18n'; // \u5F15\u5165\u7B2C\u4E09\u65B9\u6700\u65B0\u7684i18n\u6CE8\u610F\u7248\u672C

/**
 * @description: \u52A0\u8F7D\u5F53\u524D\u914D\u7F6E\u7684\u8BED\u8A00\u914D\u7F6E\u76EE\u5F55\uFF0C\u968F\u610F\u6DFB\u52A0
 */
export function loadLang() {
  const modules: Record<string, any> = import.meta.glob('./lang/*.ts', { eager: true });
  const langs: Record<string, any> = {};

  for (const path in modules) {
    const name = path.replace(/(\\.\\/lang\\/|\\.ts)/g, '');
    langs[name] = modules[path].lang;
  }
  return langs;
}

export const i18n = createI18n({
  // globalInjection: true,
  // legacy: false,
  locale: 'zh-cn', // \u9ED8\u8BA4\u8BED\u8A00\uFF0C\u5F53\u524D\u8FD9\u91CC\u7684\u6570\u636E\u8981\u8DDF\u914D\u7F6E\u7684lang\u76EE\u5F55\u4E0B\u9762\u7684\u6587\u4EF6\u540D\u5B57\u524D\u7F00\u4E00\u81F4
  fallbackLocale: 'zh-cn',
  messages: loadLang(), // \u8BB0\u8F7D\u5F53\u524D\u5F15\u5165\u7684\u8BED\u8A00\u76EE\u5F55\u7684\u5904\u7406\u8FC7\u540E\u7684\u6570\u636E
});

/**
 * @description: \u5207\u6362\u5F53\u524D\u591A\u8BED\u8A00
 */
export function setLang(locale?: string) {
  if (locale) {
    localStorage.setItem('lang', locale);
  }
  i18n.global.locale = locale || localStorage.getItem('lang') || '';
}

css\u56FE\u7247\u89E3\u51B3\u65B9\u6848

\u76EE\u524D\u5728\u4E1A\u52A1\u5F00\u53D1\u4E2D,css\u7684\u6837\u5F0F\u591A\u8BED\u8A00\u4E5F\u4F1A\u7ECF\u5E38\u7528\u5230\uFF0C\u53EF\u80FD\u4E00\u4E9B\u56FE\u7247\u7684\u5B57\u4F53\u6BD4\u8F83\u590D\u6742\uFF0C\u4EE3\u7801\u5F88\u96BE\u5B9E\u73B0\u3002\u6216\u8005\u6211\u4EEC\u4E3A\u4E86\u51CF\u5C11\u591A\u8BED\u8A00\u7684\u914D\u7F6E\uFF0C\u52A0\u5FEB\u5F00\u53D1\u6548\u7387\u4E5F\u4F1A\u4F7F\u7528\u591A\u8BED\u8A00\u7684\u914D\u7F6E,\u76EE\u524D\u8FD9\u91CC\u63D0\u4F9Bscss\u7684\u56FE\u7247\u591A\u8BED\u8A00\u7684\u65B9\u6848

css
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
  width: $width;
  height: $height;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  @include loop-lang-bg($preUrl, $posUrl);
}
// \u80CC\u666F\u56FE\u591A\u8BED\u8A00
@mixin loop-lang-bg($preUrl, $posUrl) {
  $list: zh-cn, en-us; // \u914D\u7F6E\u9700\u8981\u7684\u591A\u8BED\u8A00\uFF0C\u6839\u636E\u9879\u76EE\u6765
  @each $i in $list {
    &.#{$i} {
      background-image: url('#{$preUrl}/#{$i}/#{$posUrl}');
    }
  }
}

\u5B9A\u4E49\u56FE\u7247\u7684\u76EE\u5F55\u683C\u5F0F

bash
\u251C\u2500\u2500 button
\u2502   \u251C\u2500\u2500 en-us
\u2502   \u2502   \u2514\u2500\u2500 confirm.png
\u2502   \u251C\u2500\u2500 zh-cn
\u2502   \u2502   \u2514\u2500\u2500 confirm.png

HTML\u7684\u4F7F\u7528\u65B9\u5F0F

html
<template>
 <div :class="['btn-confirm', i18n.global.locale]"></div>
</template>
<script lang="ts" setup name="HomePage">
    import { i18n } from '/@/i18n';
</script>
<style lang="scss" scoped>
    .btn-confirm {
        @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
    }
</style>
`,9),e=[o];function c(t,r,F,D,y,C){return a(),n("div",null,e)}const g=s(p,[["render",c]]);export{i as __pageData,g as default};