正文

在 nuxt4 项目里使用 i18n

由于关于 nuxt4 的中文文档很少, 导致用常用的 ai 工具了解到的 nuxt4 的信息和实际上有很大的误差, 尤其是涉及到第三方库, 按照 ai 给的路径实现功能会踩相当多的坑, 因此强烈建议一定要去第三方库的官网查看安装方式

1. 官网地址: i18n.nuxtjs.org

2. 安装: pnpm add @nuxtjs/i18n ===> 我这里安装的是 10.0 版本"@nuxtjs/i18n": "^10.0.3",

3. 在 nuxt.config.ts 文件中进行如下配置

   export default defineNuxtConfig({
     modules: ['@nuxtjs/i18n'],
     i18n: {
       defaultLocale: 'zhHans',  // 设置默认值后，路由路径里不带此语言环境选项， 如：http://localhost:3000/zhHans 会变成 http://localhost:3000
       locales: [
         { code: 'en', name: 'English', file: 'en.ts' },
         { code: 'zhHans', name: '简体中文', file: 'zhHans.ts' },
       ]
     }
   })
   

4. 在 根目录 创建 i8n / locales / en.ts 和 zhHans.ts 一定要在根目录创建, 否则会在服务端报错, 无法找到指定目录下的文件, 如果你选择使用 path 指定绝对路径, 又会警告不推荐这种使用方式, 一根筋变成两头堵, 十分难受

5. 检查配置项无误后, 就能在项目中正常使用了