update 升级@intlify/unplugin-vue-i18n版本依赖 update i18n使用方法。 add 新增i18n vite插件。

LiuHao

2024-01-11 024783588e577a68c7e285dd83d1cae9bf9c0862

update 升级@intlify/unplugin-vue-i18n版本依赖
update i18n使用方法。
add 新增i18n vite插件。

 package.json

@@ -45,8 +45,8 @@
    "vue-types": "5.1.1"
  },
  "devDependencies": {
    "@iconify/json": "2.2.157",
    "@intlify/unplugin-vue-i18n": "1.6.0",
    "@iconify/json": "2.2.167",
    "@intlify/unplugin-vue-i18n": "2.0.0",
    "@types/crypto-js": "4.2.0",
    "@types/file-saver": "2.0.5",
    "@types/js-cookie": "3.0.5",
@@ -82,9 +82,9 @@
    "unplugin-vue-setup-extend-plus": "1.0.0",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1",
    "vitest": "0.29.7",
    "vitest": "1.1.3",
    "vue-eslint-parser": "9.3.2",
    "vue-tsc": "0.35.0",
    "vue-tsc": "1.8.27",
    "vite": "5.0.10"
  }
}

 src/App.vue

@@ -1,5 +1,5 @@
<template>
  <el-config-provider :locale="appStore.locale" :size="size">
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>
@@ -10,7 +10,6 @@
import useAppStore from '@/store/modules/app';

const appStore = useAppStore();
const size = computed(() => appStore.size);

onMounted(() => {
  nextTick(() => {

 src/lang/en_US.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
{
  "route": {
    "dashboard": "Dashboard",
    "document": "Document"
  },
  "login": {
    "username": "Username",
    "password": "Password",
    "login": "Login",
    "code": "Verification Code",
    "copyright": ""
  },
  "navbar": {
    "full": "Full Screen",
    "language": "Language",
    "dashboard": "Dashboard",
    "document": "Document",
    "message": "Message",
    "layoutSize": "Layout Size",
    "selectTenant": "Select Tenant",
    "layoutSetting": "Layout Setting",
    "personalCenter": "Personal Center",
    "logout": "Logout"
  }
}

 src/lang/index.ts

@@ -1,19 +1,8 @@
// è‡ªå®šä¹‰å›½é™…化配置
import { createI18n } from 'vue-i18n';

// æœ¬åœ°è¯­è¨€åŒ…
import enUSLocale from './en_US';
import zhCNLocale from './zh_CN';
import { LanguageEnum } from '@/enums/LanguageEnum';

const messages = {
  zh_CN: {
    ...zhCNLocale
  },
  en_US: {
    ...enUSLocale
  }
};
import messages from '@intlify/unplugin-vue-i18n/messages';

/**
 * èŽ·å–当前语言
@@ -28,6 +17,7 @@
};

const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: getLanguage(),
  messages

 src/lang/zh_CN.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
{
  "route": {
    "dashboard": "首页",
    "document": "项目文档"
  },
  "login": {
    "username": "用户名",
    "password": "密码",
    "login": "登 å½•",
    "code": "请输入验证码",
    "copyright": ""
  },
  "navbar": {
    "full": "全屏",
    "language": "语言",
    "dashboard": "首页",
    "document": "项目文档",
    "message": "消息",
    "layoutSize": "布局大小",
    "selectTenant": "选择租户",
    "layoutSetting": "布局设置",
    "personalCenter": "个人中心",
    "logout": "退出登录"
  }
}

 vite/plugins/i18n.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,6 @@
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
export default (path: any) => {
  return VueI18nPlugin({
    include: [path.resolve(__dirname, '../../src/lang/**.json')]
  });
};

 vite/plugins/index.ts

@@ -6,6 +6,7 @@
import createSvgIconsPlugin from './svg-icon';
import createCompression from './compression';
import createSetupExtend from './setup-extend';
import createI18n from './i18n';
import path from 'path';

export default (viteEnv: any, isBuild = false): [] => {
@@ -18,5 +19,6 @@
  vitePlugins.push(createIcons());
  vitePlugins.push(createSvgIconsPlugin(path, isBuild));
  vitePlugins.push(createSetupExtend());
  vitePlugins.push(createI18n(path));
  return vitePlugins;
};