Vue2+Vite环境下vue-i18n插件失效问题求助

从Webpack迁移至Vite后，使用@intlify/vite-plugin-vue-i18n@6.0.1无法正常加载组件内的<i18n>块，页面文本未被翻译，控制台出现警告：

[vue-i18n] Cannot translate the value of keypath 'language'. Use the value of keypath as default

当前依赖版本 #

{
  "vue": "2.6.11",
  "vue-i18n": "8.17.0",
  "@kazupon/vue-i18n-loader": "0.5.0",
  "@intlify/vite-plugin-vue-i18n": "6.0.1",
  "vite": "2.9.15",
  "vite-plugin-vue2": "2.0.2"
}

vite.config.js 配置 #

/* cSpell:disable */
import { defineConfig } from 'vite';
const { resolve } = require('path');
import { createVuePlugin } from 'vite-plugin-vue2';
import copy from 'rollup-plugin-copy';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import clear from 'rollup-plugin-clear';
import vueI18n from '@intlify/vite-plugin-vue-i18n';
import { createI18nPlugin } from '@yfwz100/vite-plugin-vue2-i18n';

const destDir = `../var/dist/views`;

const host = 'localhost';
let filePort;
try {
    const port = require('../port');
    filePort = port && port.front;
    // eslint-disable-next-line no-empty
} catch (error) {}

const listenPort = filePort || '10210';

const pages = {
    cn: {
        dir: 'pages',
        template: 'cn.html',
        entry: 'cn.js'
    },
    'vue-test': {
        dir: 'vue-test/index',
        template: 'index.html',
        entry: 'index.js'
    }
};

const multiplePagePath = 'src/pages';
const copyFileList = [];
Object.values(pages).forEach(item => {
    copyFileList.push({
        src: `${multiplePagePath}/${item.dir}/${item.template}`,
        dest: destDir + '/' + item.dir,
        transform: (contents, filename) =>
            contents
                .toString()
                .replace(
                    '<!-- viteDevelopmentCopyReplaceHref -->',
                    `<script src="//${host}:${listenPort}/${multiplePagePath}/${item.dir}/${item.entry}" type="module" ></script>`
                )
    });
});

export default defineConfig({
    resolve: {
        alias: { src: resolve(__dirname, './src') },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
        port: listenPort,
        // https: true,
        hmr: { host },
        origin: `//${host}:${listenPort}`
    },
    plugins: [
        createVuePlugin(),
        clear({
            targets: ['../var']
        }),
        copy({
            targets: [...copyFileList, { src: 'src/pages/*.html', dest: destDir }, { src: 'src/pages/layout', dest: destDir }],
            verbose: true,
            hook: 'buildStart'
        }),
        vueI18n({
            compositionOnly: false
        })
    ]
});

组件代码（index.vue） #

<i18n>
{
  "en-us": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "zh-cn": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>
<template>
    <div id="app">
         <p>{{$t('language')}}</p>
    </div>
</template>
<script>
</script>

解决方案 #

1. 修复版本兼容性
   @intlify/vite-plugin-vue-i18n@6.x仅支持Vue 3 + vue-i18n@9.x，你的Vue 2 + vue-i18n@8.x需要使用插件的3.x版本：

   npm uninstall @intlify/vite-plugin-vue-i18n
   npm install @intlify/vite-plugin-vue-i18n@3.4.0 --save-dev
   

2. 调整插件配置
   修改vite.config.js中的vueI18n插件配置，确保开启Legacy API支持，并指定语言文件路径（如果有全局locale文件）：

   vueI18n({
       compositionOnly: false,
       include: resolve(__dirname, './src/**/*.{json,yml,yaml}'), // 根据你的文件路径调整
       runtimeOnly: false // 允许编译组件内的<i18n>块
   })
   

3. 统一语言标识格式
   确保组件内<i18n>块的语言标识和i18n实例初始化时的locale值完全一致（比如都是zh-cn或zh-CN），避免大小写或格式不匹配导致无法读取翻译内容。

4. 确认i18n实例初始化
   检查项目入口文件是否正确初始化vue-i18n并挂载到Vue实例：

   import Vue from 'vue'
   import VueI18n from 'vue-i18n'
   
   Vue.use(VueI18n)
   
   const i18n = new VueI18n({
       locale: 'zh-cn', // 和组件内的语言标识一致
       fallbackLocale: 'en-us'
   })
   
   new Vue({
       i18n,
       render: h => h(App)
   }).$mount('#app')
   

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