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

<!-- more -->

安装插件

https://marketplace.visualstudio.com/items?itemName=wu529778790.i18n-automatically

配置

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

然后修改配置

{
  "i18nFilePath": "/src/i18n",
  "templateI18nCall": "$t",
  "scriptI18nCall": "i18n.t",
  "autoImportI18n": "import i18n from '@/i18n';",
  "keyFilePathLevel": 2,
  "excludedExtensions": [
    ".svg",
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".bmp",
    ".ico",
    ".md",
    ".txt",
    ".json",
    ".css",
    ".scss",
    ".less",
    ".sass",
    ".styl"
  ],
  "debug": false,
  "baidu": {
    "appid": "",
    "secretKey": ""
  }
}

安装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)