踩坑: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 这样的形式,则可以简化为
// }
},
标签:国际化,cn,nuxt2,locale,json,element,prefix,en,i18n
From: https://www.cnblogs.com/brujie/p/18348853