How use vue-i18n with vue2, vite?

Question

i'm migrating from webpack to vite, but there is a problem that I can't find a plugin to use i18n

I tried to use @intlify/vite-plugin-vue-i18n: 6.0.1, it doesn't seem to be work

now my package version:

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({
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            // you need to set i18n resource including paths !
            // include: resolve(__dirname, './path/to/src/locales/**'),
            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>

when i open the page, the text has not been translated and there is a warning in console:

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

Can anyone help me on this? Thanks in Advance

Answer 1

@intlify/vite-plugin-vue-i18n does not support custom block in Vue 2. You should use unplugin-vue-i18n with vue-i18n-bridge.

Minimal examples of Vue2 + VueI18n custom block + Vite:

• Vue<=2.6: https://stackblitz.com/edit/vitejs-vite-wk6hhj

• Vue 2.7: https://stackblitz.com/edit/vitejs-vite-elfdtq

---

I18n Legacy API:

• Vue<=2.6: https://stackblitz.com/edit/vitejs-vite-ed3cmt