国际化多语言一键替换，在线翻译

自动扫描项目全部汉字，一键在线翻译，意见拆分语言文件，分分钟实现国际化。

<!-- more -->

安装插件

https://marketplace.visualstudio.com/items?itemName=DewuTeam.du-i18n

配置

右键国际化-设置，自动生成配置文件du-i18n.config.json

然后修改配置

{
  "quoteKeys": ["this.$t", "$t", "i18n.t"], // 目前可以配置3个key，this.$t, $t, i18n.t，分别对应script标签，template标签，ts/js文件
  "defaultLang": "zh",
  "tempLangs": ["zh", "en"],
  "langPaths": "**/src/client/i18n/locale/**", // 我们的项目主要修改的是这个路径，加了client
  "transSourcePaths": "**/src/client/i18n/source/**", // 我们的项目主要修改的是这个路径，加了client
  "tempPaths": "**/src/client/i18n/temp/**", // 我们的项目主要修改的是这个路径，加了client
  "tempFileName": "",
  "multiFolders": ["src", "pages"],
  "prefixKey": null,
  "uncheckMissKeys": [],
  "isSingleQuote": true,
  "isOnlineTrans": true,
  "baiduAppid": "", // 百度翻译appid, 大家自己申请, 尽量用自己的
  "baiduSecrectKey": "" // 百度翻译密钥, 大家自己申请, 尽量用自己的
}

安装vue-i18n依赖

vue2

yarn add vue-i18n@8.2.1

然后新建src/client/i18n/index.js

import VueI18n from 'vue-i18n'
import Vue from 'vue'

Vue.use(VueI18n)

// 引入语言文件
function loadLocaleMessages() {
  const locales = require.context('./locale', true, /[a-z0-9-]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([a-z0-9-]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

const locale = window.navigator.language.split('-')[0] || localStorage.getItem('locale') || 'zh'

const i18n = new VueI18n({
  legacy: false, // 设置为 false，启用 composition API 模式
  locale, // set default locale
  messages: loadLocaleMessages(), // set locale messages
  globalInjection: true, // 全局注入
  silentTranslationWarn: false //隐藏这些报错
})

export default i18n

然后在src/client/main.js中引入

import i18n from '@/i18n'

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vu3

yarn add vue-i18n@9.1.1

然后新建src/client/i18n/index.js

import { createI18n } from 'vue-i18n'

// 引入语言文件
function loadLocaleMessages() {
  const locales = require.context('./locale', true, /[a-z0-9-]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([a-z0-9-]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

const i18n = createI18n({
  legacy: false, // 设置为 false，启用 composition API 模式
  locale: navigator.language, // set default locale
  messages: loadLocaleMessages(), // set locale messages
  globalInjection: true, // 全局注入
  silentTranslationWarn: false //隐藏这些报错
})

export default i18n

然后在src/client/main.js中引入

import i18n from '@/i18n'
app.use(i18n)