vue-i18n@9.2.2 array interpolation works in dev but not in production

[judahburke]

Hello,

I am working on a small project on github pages (vite, vue3, typescript) and I'm having an issue with interpolation. 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}

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')

[judahburke]

Figured out the solution via this #1059