赞
踩
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
-检测所有path root
-仅检测根路径"/
" 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"], // 预渲染的页面
},
}
})
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。