vue国际化配置
首先安装vue-i18n
包
新建locales/i18n.js文件
/**
* Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16.
*/
import Vue from "vue";
import VueI18n from "vue-i18n";
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang
import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang
import enLocale from "./lang/enLocale";
import zhLocale from "./lang/zhLocale";
const messages = {
en: {
...enLocale,
...elementEnLocale,
},
zh: {
...zhLocale,
...elementZhLocale,
},
};
/**
* i18n 配置
* @param locale 本地化语言
* @param fallback 回退语言
* @returns {VueI18n}
*/
function initI18n(locale, fallback) {
Vue.use(VueI18n);
let i18nOptions = {
locale,
fallbackLocale: fallback,
silentFallbackWarn: true,
messages,
};
return new VueI18n(i18nOptions);
}
export { initI18n };
locales/lang/zhLocale.js文件
/**
* Created by liweiliang 406320591@QQ.com on 2022/10/17 14:11.
*/
const zhModulesFiles = require.context("./zh", true, /\.js$/);
const zhLang = zhModulesFiles.keys().reduce((modules, modulePath) => {
const value = zhModulesFiles(modulePath);
modules = { ...modules, ...value.default };
return modules;
}, {});
export default zhLang;
locales/lang/enLocale.js文件
main.js引入
import { initI18n } from "@/locales/i18n";
const i18n = initI18n(Cookies.get('language') || 'en', "en");
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/1122.html
评论已关闭