vue-i18n@9.2.2 argument interpolation works in dev, not production

Viewed 15

I am working on a small project on github pages (vite, vue3, typescript) and I'm having an issue with interpolation with vue-i18n. I've been trying to find the same issue somewhere else, but I have not been able to find such an example. I'm wondering if there is some recent change that I have misunderstood. This is the issue I am having: as an example, I would like to have this message displayed with i18n.

Hello World

And so in my locale json file I have

{ "hello_": "Hello {0}" }

And in my template I have

<p>{{$t('hello_', ['World'])}}</p>

When working locally, I get

Hello World

as expected. However, when I build my app and deploy the dist, I am getting

Hello {0}

My original code was passing the keypath and the interpolation arguments as props to another component. I tried specifying it directly (as in the above examples) and also tried named interpolation "hello_":"Hello {name}" and {{$t("hello_", {name: "World"})}} which also worked fine in dev, but not in production. I've tried with $t and with importing directly via

    import { useI18n } from 'vue-i18n' 
     const { t } = useI18n({ useScope: 'global' })

This is my packages.json

    {
      "name": "hello-world",
      "version": "0.0.0",
      "scripts": {
        "dev": "vite",
        "build": "run-p type-check build-only",
        "preview": "vite preview --port 4173",
        "test:unit": "vitest --environment jsdom",
        "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
        "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'",
        "build-only": "vite build",
        "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
        "deploy": "sh deploy.sh"
      },
      "dependencies": {
        "@vue/cli-shared-utils": "^5.0.8",
        "pinia": "^2.0.21",
        "vue": "^3.2.38",
        "vue-i18n": "^9.2.2",
        "vue-router": "^4.1.5",
        "vue3-promise-dialog": "^0.3.4"
      },
      "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "^6.0.1",
        "@rushstack/eslint-patch": "^1.1.4",
        "@types/jsdom": "^20.0.0",
        "@types/node": "^16.11.56",
        "@vitejs/plugin-vue": "^3.0.3",
        "@vue/eslint-config-prettier": "^7.0.0",
        "@vue/eslint-config-typescript": "^11.0.0",
        "@vue/test-utils": "^2.0.2",
        "@vue/tsconfig": "^0.1.3",
        "cypress": "^10.7.0",
        "eslint": "^8.22.0",
        "eslint-plugin-cypress": "^2.12.1",
        "eslint-plugin-vue": "^9.3.0",
        "jsdom": "^20.0.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.7.1",
        "start-server-and-test": "^1.14.0",
        "typescript": "~4.7.4",
        "vite": "^3.0.9",
        "vitest": "^0.23.0",
        "vue-tsc": "^0.40.7"
      }
    }

And this is my vite.config.ts

    import { dirname, resolve } from 'node:path'
    import { fileURLToPath, URL } from 'node:url'
    
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueI18n from '@intlify/vite-plugin-vue-i18n'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      base: process.env.NODE_ENV === 'production'
        ? '/hello-world/' // prod
        : '/', // dev
      plugins: [
        vue(),
        vueI18n({
          include: resolve(
            dirname(fileURLToPath(import.meta.url)),
            './assets/locales/**'),
        })
      ],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      }
    })

And my main.ts is

    import { createApp } from 'vue'
    import { createI18n } from 'vue-i18n'
    
    import App from './App.vue'
    import en_US from './assets/locales/en_US.json'
    import vn_VN from './assets/locales/vn_VN.json'
    import es_MX from './assets/locales/es_MX.json'
    import de_DE from './assets/locales/de_DE.json'
    
    const i18n = createI18n({
        allowComposition: true,
        locale: 'en_US',
        fallbackLocale: 'en_US',
        messages: { 
            en_US, 
            vn_VN, 
            es_MX, 
            de_DE 
        }
    })
    
    const app = createApp(App)
    
    app.use(i18n)
    
    app.mount('#app')

0 Answers
Related