vue2、vite如何使用vue-i18n？

Question

我正在從 webpack 遷移到 vite，但是有一個問題是我找不到使用 i18n 的插件

我嘗試使用@intlify/vite-plugin-vue-i18n: 6.0.1 ，它似乎不起作用

現在我的 package 版本：

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>

當我打開頁面時，文本尚未翻譯，並且控制台中有警告：

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

誰可以幫我這個事？ 提前致謝

Answer 1

@intlify/vite-plugin-vue-i18n不支持 Vue 2 中的自定義塊。您應該將unplugin-vue-i18n與vue-i18n-bridge一起使用。

以下是 Vue2 + VueI18n 自定義塊 + Vite 的最小示例：

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

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