vite-plugins-vue3-autoi18n v0.2.1

vite-plugins-autoI18n

介绍

vue3项目中文自动替换国际化格式

软件架构

vue3.2 setup vite

安装教程

npm i vite-plugins-vue3-autoi18n

使用说明

配置

// src/i18n/index.js
import {createI18n} from 'vue-i18n'
import zh from '../lang/zh'
import en from '../lang/en'
const i18n = createI18n({
    locale: 'en', // set locale
    fallbackLocale: 'en', // set fallback locale
    legacy: false,
    globalInjection: true,
    messages: {
        en,
        zh
    }
})
export default i18n

// src/lang/en/index
export default {
    hello:"hello",
    switchLanguage:'switch language',
    dialog:{
      close:'close',
    }
}

// src/lang/zh/index
export default {
    hello:"你好",
    switchLanguage:'切换语言',
    dialog:{
      close:'取消',
    }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'
createApp(App).use(i18n).mount('#app')

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginsVueAutoI18n from 'vite-plugins-vue3-autoi18n'
import dict from './src/lang/zh/index.js'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vitePluginsVueAutoI18n({
    include:['src/**'], //需要进行检查替换的文件
    exclude:['src/lang/**','src/i18n/*','node_modules/**','**.css','**.less'], //不进行替换的文件
    languageDir:'@/i18n', //i18n文件入口防止js文件无法匹配
    dict, //所需要替换的字典 使用中文字典进行匹配
    outputDir:'src/arguments.js', //没能与字典匹配的文字输出的文件
    appid:'', //百度翻译的appid
    secretKey:'',//百度翻译的密钥
    tranLang:'en',//翻译的目标语言
    generateDict:true,//是否需要开启生成字典 false的话appid secretKey tranLang参数可以不填
  }),vue()],
})

功能描述

1. 在编译时自动替换国际化语言 不影响源代码
2. 支持多语言
3. 支持vue3 setup语法

//可将中文字段在编译时匹配成vue-i18n字段 不影响源代码
<template>
  <div>你好</div>
  <div>{{tst == 'add' ? '你好' : '世界'}}</div>
  <div>测试</div>
</template>
<script setup>
  import { ref } from 'vue'
  const tst = ref('add')
  const hello = ref('你好')
</script>
<style scoped>
</style>

转换为====>
<template>
  <div>{{$t('hello')}}</div>
  <div>{{tst == 'add' ? $t('hello') : '世界'}}</div>
  <div>测试</div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { ref } from 'vue'
const tst = ref('add')
const hello = ref(t('hello'))
</script>
<style scoped>
</style>

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

版本

0 测试版
0.0.1 初始版本
0.0.2 添加描述信息
0.0.3 添加描述信息
0.0.5 修复使用报错的bug
0.1.0 支持字典对象嵌套功能 0.1.1 修复字典对象嵌套后匹配成功后带着上一个嵌套对象内容的bug，优化了代码匹配模式
0.1.2 修复vue模板中字符串匹配后缺少:的bug，优化匹配setup语法方法
0.1.3 调整插件提示信息 0.2.1 对接百度翻译api 实现打包后获取所有字典中没有匹配到的汉字然后去自动翻译保存到lib文件夹下,增加进入文件的提示功能方便调试