安装、引入
npm install @nuxtjs/i18n@next --save-dev
-------------------------
nuxt.config.ts
export default defineNuxtConfig({
...
modules: [
"@nuxtjs/i18n",
],
})
配置
配置位置
直接在文件中配置
export default defineNuxtConfig({
modules: [
'@nuxtjs/i18n',
],
i18n: {
// 配置内容
}
})
export default defineNuxtConfig({
modules: [
[
'@nuxtjs/i18n',
{
// 配置内容
}
]
]
})
通过vueI18n
属性可以设置一个配置文件,写i18n插件的一些配置项
export default defineNuxtConfig({
modules: [
"@nuxtjs/i18n",
],
i18n: {
vueI18n: "./nuxt-i18n.js", // 配置文件
},
})
// nuxt-i18n.js
export default {
// 配置内容
}
配置策略prefix_except_default
url区分路由
如果目前有路由
-
http://localhost:3000/
-
http://localhost:3000/detail
将被转换为
-
http://localhost:3000/
-
http://localhost:3000/en
-
http://localhost:3000/detail
-
http://localhost:3000/en/detail
name也会从xxx
改为xxx___cn
和xxx___en
export default defineNuxtConfig({
i18n: {
locales: ["cn", "en"],
defaultLocale: "cn",
customRoutes: "page",
strategy: "prefix_except_default",
detectBrowserLanguage: {
fallbackLocale: "cn",
useCookie: true,
cookieKey: "language",
redirectOn: "no prefix", // recommended
cookieDomain: cookieDomain(),
alwaysRedirect: true,
},
vueI18n: "./build/nuxt-i18n.js", // custom path example
},
})
import { lang as cn } from "../locales/lan-zh";
import { lang as en } from "../locales/lan-en";
export default {
legacy: false,
warnHtmlMessage: false,
messages: {
cn: {
lang: cn,
},
en: {
lang: en,
},
},
};
配置介绍
-
legacy
:设置为false
的话,$i18n
是全局Composer
实例,否则是一个全局VueI18n
实例 -
locales
:支持的语言列表,可以是数组或对象-
code
:(必填)-区域设置的唯一标识符 -
iso
:用于SEO优化 -
file
:国际化对应文件(messages)
-
配置策略no_prefix
cookie属性区分
如下配置完后,i18n
会默认获取cookie
中存储的language
字段,根据字段值是"cn"
还是"en"
处理国际化
在需要切换国际化时,通过$i18n.setLocaleCookie("en")
切换
export default defineNuxtConfig({
i18n: {
locales: ["cn", "en"],
defaultLocale: "cn",
strategy: "no_prefix",
detectBrowserLanguage: {
fallbackLocale: "cn",
useCookie: true,
cookieKey: "language",
redirectOn: "no prefix", // recommended
cookieDomain: cookieDomain(),
},
vueI18n: "./build/nuxt-i18n.js", // custom path example
},
})
import { lang as cn } from "../locales/lan-zh";
import { lang as en } from "../locales/lan-en";
export default {
legacy: false,
warnHtmlMessage: false,
messages: {
cn: {
lang: cn,
},
en: {
lang: en,
},
},
};
配置介绍
-
alwaysredirect
:true
总是重定向到存储在cookie中的值,false
仅在第一次访问时 -
fallbackLocale
:cookie中没有设置值的话,默认使用此致(并不是默认setCookie
此值) -
redirectOn
:all
-检测所有pathroot
-仅检测根路径"/
"no_prefix
-"root
"宽松版 -
useCookie
:路由策略下才会用到该参数:true
被重定向到首选区域后设置cookie。false
每次重定向 -
cookieKey
:cookie
的名称 -
cookiecrossorigin
:cookie
的domain
配置
注意问题
当修改过detectBrowserLanguage.cookieKey
后,不要相信i18n中setLocaleCookie
自动修改cookie
中cookieKey
对应的值的效果,他会偶尔抽风,错误的去设置默认cookieKey
(i18n_redirected
)
我的解决方案
手动设置language
开解决该问题
-
通过
plugins
在每次打开页面时更新language
的值// 更新i18n export default defineNuxtPlugin((nuxtApp) => { let language = useCookie("language", getCookieInfo()); // getCookieInfo用于获取i18n配置上相同的domain等信息【{domain:'xxx'}】 if (!language.value) language.value = "cn"; nuxtApp.$i18n.setLocale(language.value); });
-
setLanguage
时,调用$i18n.setLocaleCookie
同时手动修改language
的值/** * 设置国际化 * @param {string} val 国际化的值 * @returns undefined */ export function setLanguage(val) { if (!["cn", "en"].includes(val)) return; let language = useCookie("language", getCookieInfo()); language.value = val; const nuxtData = useNuxtApp(); nuxtData.$i18n.setLocaleCookie(val); // window.location.reload(); }
需求允许的情况下,修改后调用
window.location.reload
就更好啦注意事项:
(仅打包后会出现异常)不要在
nuxt.config.ts
中将国际化页面配置成静态渲染(预渲染)页面,该选项会在打包时将页面预渲染成默认语言的html文件,访问该页面时服务端会直接返回当前html(因为与渲染会将函数执行,导致服务端返回的一直是默认语言的页面),最终导致页面语言和排版混乱附:预渲染页面配置方法如下
export default defineNuxtConfig({ nitro: { prerender: { crawlLinks: true, routes: ["/","/detail"], // 预渲染的页面 }, } })