vue-i18n 不在生产构建中替换令牌

Question

我们有一个基于 Quasar 2 的项目，该项目使用 vue-i18n 来本地化字符串，但遇到了一个问题，即在我们的开发主机和生产部署中无法正确处理带有替换标记的字符串。

在我们的语言文件中：

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

在我们的 Vue 文件中，在模板部分：

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

在 localhost 中运行时，显示的文本是：

Saisissez le 12345 pour confirmer la suppression

在我们的部署中

Saisissez le {personId} pour confirmer la suppression

基于@intlify/vite-plugin-vue-i18n 的文档，我们确实尝试在quasar.conf.js中指定compositionOnly: false ，但这似乎没有什么不同。

我们正在使用 Vite 构建我们的项目。 查看dist/spa文件夹，我们没有看到任何字符串损坏的证据，因为它们出现在 assets 文件夹中的 js 中。

quasar build的结果显示了这个问题，而quasar dev运行的 dev 版本没有。 这是一个 SPA 目标。

环境信息：

• vue-国际化 9.2.2
• vite 2.9.15
• @intlify/vite-plugin-vue-i18n 6.0.3
• 类星体 2.10.1
• 节点 16.10.0

更新：我刚刚尝试使用yarn create quasar从头开始创建一个 Quasar 项目，它显示了相同的问题。 使用 vite 尝试使用新的 vue + vue-i18n 项目，仅在我使用@intlify/unplugin-vue-i18n/vite显示问题，表明问题与此有关。

Answer 1

如果您使用的是 Vue2，请使用此库Vue-i18n for Vue2

如果您使用的是 vue3，请使用这个Vue-i18n for Vue3 。 它将与这些包一起正常工作

这些软件包由 nuxt 和 vue 社区支持，因此它将是最佳解决方案

Answer 2

原来我们需要为@intlify/vite-plugin-vue-i18n提供runtimeOnly: false选项来处理这个问题。

该文档确实涵盖了这一点，但直到您遇到这个问题才清楚：

此外，如果您使用 vite 进行生产构建，Vue I18n 将自动捆绑仅运行时模块。 如果您需要使用 Message 编译器进行按需编译，则需要将runtimeOnly选项设置为false 。

如果我理解正确，那么如果没有这个选项，消息会在编译时进行优化，并且无法从令牌替换中受益。

因此，如果您使用的是 Quasar，请在quasar.conf.js

vitePlugins: [
  ['@intlify/vite-plugin-vue-i18n', {
    // if you want to use Vue I18n Legacy API, you 
    // need to set `compositionOnly: false`
    // compositionOnly: false,
    runtimeOnly: false,
    // you need to set i18n resource including paths !
    include: path.resolve(__dirname, './src/i18n/**')
  }]
],

如果你使用的是纯 Vue3，带有 Vite，那么在vite.config.ts文件中：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueI18nPlugin({
      runtimeOnly: false
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})