- 在src下面创建目录,放多语言包(json/js)
- . 使用vue-i18n,创建index.js
import Vue from 'vue'; import VueI18n from 'vue-i18n';
//引用element-ui语言包 element-en,element-zh // 导入语言包信息 import en from
"./locale/en.json"; import zh from "./locale/zh-CN.json"; // 注册i18n
Vue.use(VueI18n); // 语言包根据语言环境分类 const localeMessages = { en: {
...element-en,//element框架
...en }, zh:{
...element-zh
...zh } };
const i18n = new VueI18n({
locale: zh,//当前默认语言环境
messages: localeMessages })
3. 注册vue-i18n(main.js中)
import i18n from './i18n';// 引入i18n实例
new Vue({ i18n, // 挂载到根实例中 render: h => h(App) }).$mount('#app')
4. element框架多语言化
在index.js里面引用element语言包,
在vue.config.js里面配置(或 webpack.config.js),
configureWebpack里面的 plugins加入
官网地址:https://element.eleme.cn/#/zh-CN/component/i18n
按需加载:ElementLocale.i18n((key, value) => i18n.t(key, value));
new webpack.NormalModuleReplacementPlugin(/element-ui[/\]lib[/\]locale[/\]lang[/\]zh-CN/,
‘element-ui/lib/locale/lang/en’)
5. 可使用的插件(vscode) vue-swift-i18n ,可以生成中文包,
6. key i18n-ally:增强多语言化之后代码的可读性
7. i18n-ally配置:
vscode setting.json 配置 i18n
// Vue: i18n-ally 插件如下须要本身配置
"i18n-ally.localesPaths": ["src/assets/lang"], // 翻译的语言路径
"i18n-ally.enabledParsers": ["json", "js"], // 翻译支持的语言文件格式,不写的话,无法支持js
"i18n-ally.encoding": "utf-8", // 翻译文件的编码
"i18n-ally.sourceLanguage": "zh-CN", // 根据此 zh-CN 语言文件翻译其他语言文件的 变量和内容
"i18n-ally.displayLanguage": "zh-CN", // 组件中显示的语言
"i18n-ally.keystyle": "flat",
// 翻译后变量的格式, flat(扁平式即对象属性路径变成一个长字符串), nested(嵌套式即对象属性变量可以进行相互之间的嵌套)
// 注意: 如果 i18n-ally 检测不出来框架, 或 提示错误, 可能是版本太高的缘故
i18n-ally
参考文档:https://gitee.com/antfu/i18n-ally/#-%E5%B8%B8%E7%94%A8%E8%AE%BE%E7%BD%AE