Install

node version: >=12.0.0

vite version: >=3.0.4

pnpm i vite-plugin-i18n-auto --save-dev
// or
yarn add vite-plugin-i18n-auto -D

Usage

• Configuration plugin in vite.config.ts

1interface Options {
2  /**
3   * @note plugin enable ？
4   */
5  enable: boolean
6  /**
7   * @default false
8   * @note ast replace your code to call i18nCustomT(key,lang,[...injectData])
9   */
10  autoASTRepalce?: boolean
11  /**
12   * @note glob pattern
13   */
14  include: string[]
15  /**
16   * @note glob pattern
17   */
18  exclude?: string[]
19  /**
20   * @default ["zh_cn","en"]
21   * @note The default value in the first language will be replaced by the key
22   */
23  langList?: string[]
24  /**
25   * @default "To be translated"
26   */
27  placeholder?: string
28  /**
29   * @default "!i18n:"
30   */
31  ignoreMark?: string
32}

1import vitePluginI18n from 'vite-plugin-i18n-auto'
2
3export default () => {
4  return {
5    plugins: [
6      vitePluginI18n({
7        enable: true,
8        autoASTRepalce: true,
9        include: ['/src/**/*.{vue,tsx,ts}'],
10        exclude: [],
11        langList: ['zh_cn', 'en'],
12      }),
13    ],
14    resolve: {
15      alias: {
16        '@': '/src/', // 这是必须的 i18nCustomT 函数自动导入路径为 @/i18n
17      },
18    },
19  }
20}

• add i18nCustomT tranform function to /src/i18n/index.ts

1// 此函数内部不能写中文，不然就循环递归了(除非你已经忽略该文件)
2export const i18nCustomT = (
3  key: string,
4  lang: Record<string, any>,
5  injectData?: Array<string | number>
6) => {
7  const langkey = window.localStorage.getItem('language') || 'zh_cn'
8  const text = lang?.[langkey]?.[key] as string
9  if (!injectData) return text
10
11  const injectDataMap: Record<string, string | number> = injectData.reduce(
12    (pre, cur, index) => {
13      return {
14        ...pre,
15        [`$${index}`]: cur,
16      }
17    },
18    {}
19  )
20  const injectValueText = text.replace(/\{[^}]+\}/g, key => {
21    const varKey = key.replace('{', '').replace('}', '')
22    return (injectDataMap[varKey] as string) || key
23  })
24  return injectValueText
25}

yarn dev