- 最好是单独打开要使用i18n的项目，在工作区中i18n插件不能正常工作，猜测原因可能是配置文件在工作区中找不到要翻译的源文件。
- 很多人在这里都没说清楚，搞了好久
。 - 在根目录创建 .vscode 文件夹
- 粘贴以下代码
- 注意：翻译器的appid需要自行获取，如果翻译要求不是特别严格用百度的翻译引擎就行，项目不打的话申请每个月免费的5w字符就完全够用了。
- 百度翻译开放平台
-
{"i18n-ally.localesPaths": ["src/i18n", "src/i18n/locales"],"i18n-ally.keystyle": "nested","i18n-ally.sortKeys": true,"i18n-ally.enabledParsers": ["json", "js"],"i18n-ally.sourceLanguage": "zh","i18n-ally.displayLanguage": "zh","i18n-ally.enabledFrameworks": ["vue"], // 框架"i18n-ally.translate.engines": ["baidu"], // 翻译器"i18n-ally.translate.baidu.appid": "翻译器的appid粘贴到这里", // 翻译器api-appid"i18n-ally.translate.baidu.apiSecret": "翻译器的密钥粘贴到这里", // 翻译器api-Secret"vue-i18n.i18nPaths": "src\\i18n,src\\i18n\\locales" // 要翻译的 i18n 文件路径
}
- 打开 vscode 的扩展商店，搜索 i18n ，下载下面这两个扩展
- 完成之后会看见下面这个图标
- 下载相关包
-
npm i vue-i18n
- 配置多语言，在根目录 src 文件夹下创建文件夹 i18n ，在 i18n 文件夹下创建 locals文件夹和 index.js 文件，在locals文件夹下创建 en.js 和 zh.js 文件，如果有其他语言要翻译按照国际语言缩写规则创建就行，具体如图
- 在main.js中插入如下代码
-
import i18n from './i18n' // 引入 i18n 实例new Vue({router,i18n, // 挂载i18n 实例到 Vue 原型，使整个项目可用 this.$i18n 访问render: h => h(App)
}).$mount('#app')
- 在 i18n 文件夹下的 index.js 具体代码
-
// src/i18n/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from '@/i18n/locales/zh.json' // 中文语言包
import en from '@/i18n/locales/en.json' // 英文语言包
import { Locale } from 'vant'
// 我用的是 vant 这里主要看你使用什么UI了，热门UI都有自己的多语言引入方法
import enUS from 'vant/es/locale/lang/en-US'
import zhCN from 'vant/es/locale/lang/zh-CN'Vue.use(VueI18n)const messages = {'zh-CN': {...zh,...zhCN},'en-US': {...en,...enUS}
}// 从 localStorage 读取初始语言（默认中文）
const savedLang = localStorage.getItem('lang') || 'zh-CN'
export const getLocale = () => {return savedLang
}
const CURRENT_LANG = getLocale()
Locale.use(CURRENT_LANG, messages[CURRENT_LANG])
export default new VueI18n({locale: savedLang, // 当前语言messages // 所有语言包
})
- 在js中写 this.$t('loading') 使用，html 中省略掉 this
-
<div class="wrapper"><van-loading size="24px" vertical style="padding-top: 50px">{{ $t('loading') }}</van-loading></div>
- 此时把光标放到代码 （logout ）上别动会出现
- 点击这个笔的图标，编辑器顶部会出现输入框，可以输入要显示的内容
- 注意：不要傻傻的一个一个点击下面的地球仪图标去一个个翻译，配置好这里点击左侧的多语言插件图标
- 点击这里的地球仪图标就可以批量翻译了。
- 只要你按照我写的步骤来，你的代码中就会直接显示你配置的主要语言
- 结束，觉得内容有用的话，点个赞吧，踩了无数坑总结的，感谢！
