Quasar+Vue-i18n生产构建中占位符未替换问题求助

问题概述 #

基于Quasar 2的项目使用vue-i18n做字符串本地化时，带占位符的翻译字符串在开发环境（quasar dev）能正常替换占位符，但生产构建（quasar build）后占位符无法解析，直接显示原始的{personId}文本。

代码示例 #

语言文件（如src/i18n/fr.js） #

export default {
  'label.deleteUserConfirm': 'Saisissez le {personId} pour confirmer la suppression'
}

Vue组件模板 #

<template>
  <div>
    {{ $t('label.deleteUserConfirm', { personId: '12345' }) }}
  </div>
</template>

显示结果 #

• 开发环境：Saisissez le 12345 pour confirmer la suppression
• 生产环境：Saisissez le {personId} pour confirmer la suppression

环境信息 #

• vue-i18n 9.2.2
• vite 2.9.15
• @intlify/vite-plugin-vue-i18n 6.0.3
• quasar 2.10.1
• node 16.10.0

排查过程 #

1. 曾按照@intlify/vite-plugin-vue-i18n文档在quasar.conf.js中设置compositionOnly: false，无效果。
2. 检查dist/spa文件夹中的语言文件，字符串未被损坏。
3. 通过yarn create quasar新建项目复现了相同问题；单独新建Vue+vue-i18n+Vite项目，仅引入@intlify/unplugin-vue-i18n/vite时也出现该问题，推测问题与该插件相关。

解决方案 #

方案1：调整@intlify/vite-plugin-vue-i18n配置 #

在quasar.conf.js的build.vitePlugins中修改插件配置，禁用runtimeOnly并确保语言文件路径被正确包含：

const path = require('path')

module.exports = function (/* ctx */) {
  return {
    // ...其他配置
    build: {
      vitePlugins: [
        [
          '@intlify/vite-plugin-vue-i18n',
          {
            compositionOnly: false,
            runtimeOnly: false, // 关键：禁用仅运行时模式
            include: path.resolve(__dirname, './src/i18n/**') // 指定语言文件目录
          }
        ]
      ]
    }
  }
}

方案2：切换为组合式API调用 #

如果方案1无效，尝试改用vue-i18n的组合式API，避免插件对模板中$t的预编译处理：

1. 在组件中引入useI18n：

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

2. 修改模板调用：

<template>
  <div>
    {{ t('label.deleteUserConfirm', { personId: '12345' }) }}
  </div>
</template>

方案3：升级插件版本 #

尝试升级@intlify/vite-plugin-vue-i18n到与当前vue-i18n版本兼容的最新版（如v6.0.4+），部分旧版本存在生产环境预编译的bug。

验证 #

修改配置后重新执行quasar build，部署生产环境后检查占位符是否正常替换。

内容的提问来源于stack exchange，提问作者Andre M