Nuxt I18N ignores CDN Link

[Autumnlight02]

Environment

- Operating System: Linux
- Node Version:     v18.16.0
- Nuxt Version:     3.4.3
- Nitro Version:    2.4.0
- Package Manager:  npm@9.5.1
- Builder:          vite
- User Config:      css, typescript, imports, build, postcss, modules, devtools, i18n, tailwindcss, vite, app, nitro
- Runtime Modules:  @nuxtjs/tailwindcss@6.6.8, @pinia/nuxt@0.4.10, @nuxtjs/i18n@8.0.0-beta.12, @nuxt/devtools@0.4.6
- Build Modules:    -

Reproduction

Just try to set the baseUrl or the cdnUrl, and see if the translations are also being requested from that Url.

Describe the bug

Hello everyone, I recently ran recently into an issue. My Nuxt Project is deployed on AWS Lambda and In addition I keep static files in S3. Now the issue is that the I18N Configuration ignores the CDN path I have in S3.

My goal is now to archive that i18n pulls the translation from the s3 bucket. Do you guys know perhaps how I can set the CDN link for the translations specifically? (The rest of the app uses the static files just fine. Its just I18N)

Additional context

This is part of my nuxt.config.ts

export default defineNuxtConfig({
  i18n: {
    vueI18n: "./i18n.config.js",
    baseUrl:
      "xxx.amazonaws.com/assets/public/__i18n__/",
  },
  tailwindcss: {
    cssPath: "./tailwindGlobal.css",
  },
  vite: {
    plugins: [Components({ resolvers: [HeadlessUiResolver()] })],
  },
  app: {
    // cdnURL: process.env.S3,
    cdnURL:
      "CDNLINK",
  },
  nitro: {
    preset: "aws-lambda",
    serveStatic: false,
  },
});

And this is the entire i18n.config.js

import en from "/locales/en.json";
export default defineI18nConfig(() => {
  return {
    legacy: false,
    locale: "en",
    baseUrl:
      "xxx/assets/public/__i18n__/",
    messages: {
      en,
    },
  };
});

i tried multiple times but I18N always defaults back to the relative path. Inside of the build folder its also structured like this:

.output/
    server
        ...
    public <== hosted on s3
        __i18n__
        _nuxt

package.json

{
  "name": "xxx",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "hook:before:offline:start": "npm run build",
    "hook:before:package:initialize": "npm run build"
  },
  "devDependencies": {
    "@headlessui/vue": "^1.7.8",
    "@heroicons/vue": "^2.0.14",
    "@nuxt/devtools": "^0.4.6",
    "@nuxtjs/i18n": "8.0.0-beta.12",
    "@nuxtjs/tailwindcss": "^6.3.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@types/uuid": "^9.0.1",
    "autoprefixer": "^10.4.13",
    "esbuild": "^0.17.18",
    "nuxt": "^3.4.3",
    "postcss": "^8.4.21",
    "serverless-dotenv-plugin": "^6.0.0",
    "serverless-dynamodb-local": "^0.2.40",
    "serverless-hooks": "^1.0.0",
    "serverless-offline": "^12.0.4",
    "serverless-s3-deploy": "^0.10.1",
    "tailwindcss": "^3.2.4",
    "unplugin-vue-components": "^0.23.0"
  },
  "overrides": {
    "vue": "latest"
  },
  "dependencies": {
    "@aws-sdk/client-dynamodb": "^3.329.0",
    "@aws-sdk/lib-dynamodb": "^3.328.0",
    "@headlessui/vue": "^1.7.7",
    "@heroicons/vue": "^2.0.14",
    "@pinia/nuxt": "^0.4.10",
    "@trpc/client": "^10.25.0",
    "@trpc/server": "^10.25.0",
    "aws-sdk": "^2.1379.0",
    "lodash": "^4.17.21",
    "pinia": "^2.0.36",
    "serverless": "^3.31.0",
    "serverless-apigw-binary": "^0.4.4",
    "serverless-s3-sync": "^3.1.0",
    "trpc-nuxt": "^0.9.0",
    "uuid": "^9.0.0",
    "vue3-smooth-dnd": "^0.0.5",
    "zod": "^3.21.4"
  }
}

Logs

No response

[kazupon]

Thank you for your feedback. Sorry, I could not understand your issue. Could you give us your more details context please?

[Autumnlight02]

So basically I am deploying my Nuxt website on aws lambda and S3, issue is now that I18N tries to fetch the translations from aws lambda instead of S3, I entered in the config a different url but it will be ignored)

[Har-zheng]

你好! 我貌似遇到同样的问题 i18n: { baseUrl: "https:/xxxx/www/2.0.12/, }, app:{ cdnURL:'https:/xxxx/www/2.0.12/' } nginx 或者 node 启动后 依旧找这个目录下文件 https:/xxxx/i18n/prerender/bd8fb014.js 正常目录应该 https:/xxxx/www/2.0.12/i18n/prerender/bd8fb014.js 非常感谢能帮排查下吗?^_^

[terwer]

+1

[BobbieGoede]

Nuxt I18n baseUrl does not change the way translations are fetched. In recent versions we have fixed caching for dynamic translation files, you could probably achieve your goal using dynamic translation files to fetch from a CDN (docs.

Closing this as the issue remains unclear/needs more info.