nuxt2 语言国际化 + element国际化

踩坑:element国际化 动态设置语言必须使用服务端中的store状态才可以

import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import ElementLocale from 'element-ui/lib/locale'; // 导入 Element UI 的语言包
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'; // 导入中文语言包

Vue.use(VueI18n)

export default({app,store}) =>{
    // app.i18n = new VueI18n({
    const i18n = new VueI18n({
    locale: store.state.language, // 设置默认语言
    messages:{
            en: {
            ...require('../locales/en.json'),
            ...enLocale
            },
            cn: {
            ...require('../locales/cn.json'),
            ...cnLocale
            },
        },
    })
    // 设置 Element UI 的语言
    ElementLocale.i18n((key, value) => i18n.t(key, value));
}

语言国际化

新建locales文件夹，对应cn.json en.json

nuxt.config.js 配置文件

modules: [
   "@nuxtjs/i18n",
],
i18n: {
        langDir: "locales/",
        locales: [
            {
                code: "en",
                iso: "en",
                name: 'English',
                file: "en.json",
            },
            {
                code: "cn",
                iso: "cn",
                name: '简体中文',
                file: "cn.json",
            },
        ],
        lazy: false,
        strategy: "prefix", // 路由策略，可选值有 prefix_except_default, prefix_and_default, prefix, no_prefix 等
        defaultLocale, // 直接设置默认语言代码
        vueI18n: {
            fallbackLocale: defaultLocale,
            messages: {} // 动态加载语言文件时可以留空
        },
        detectBrowserLanguage: {
            useCookie: true,
            cookieKey: 'language',
            onlyOnRoot: true, // 这意味着只在用户首次访问应用的根路径时进行语言重定向
            alwaysRedirect: false, // 根据需要调整
        },
        // router: { // 自定义路由规则 添加前缀，但保持自定义路由结构
        //     path: '{{$locale}}/_custom_path', // 注意：对于完全自定义的路由，你可能需要根据实际情况调整这部分配置
        //     prefix: '{{$locale}}' // 或者如果所有路由都应该是 /lang/path 这样的形式，则可以简化为
        // }
    },