Vue3+Vite+Laravel项目中i18n自定义块不生效问题排查

1. 未配置Vite的vue-i18n自定义块解析插件 #

Vite原生不支持处理Vue组件内的<i18n>自定义块，必须安装专用插件来解析：

• 安装插件：

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

• 修改vite.config.js，引入并配置插件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/vite-plugin-vue-i18n';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        vueI18n({
            include: path.resolve(__dirname, './resources/locales/**'),
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/js'),
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
        },
    },
});

2. 块写法不符合规范 #

确保组件内的自定义块格式正确，以下是两种有效写法：

内联JSON格式（需指定lang属性） #

<template>
  <div>{{ $t('greeting') }}</div>
</template>

<i18n lang="json">
{
  "en": {
    "greeting": "Hello"
  },
  "zh-CN": {
    "greeting": "你好"
  }
}
</i18n>

YAML格式（需安装yaml依赖） #

<template>
  <div>{{ $t('greeting') }}</div>
</template>

<i18n lang="yaml">
en:
  greeting: Hello
zh-CN:
  greeting: 你好
</i18n>

若使用YAML格式，需额外安装依赖：

npm install yaml --save-dev

3. vue-i18n实例初始化配置错误 #

确保在app.js中正确初始化i18n，且未禁用组件级翻译：

import { createApp, h } from 'vue';
import { createI18n } from 'vue-i18n';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

// 导入全局翻译文件
import en from './locales/en.json';
import zhCN from './locales/zh-CN.json';

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en',
  messages: {
    en,
    'zh-CN': zhCN
  },
  globalInjection: true,
  legacy: false // Vue3必须设置为false
});

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(i18n)
      .use(ZiggyVue)
      .mount(el);
  },
});

4. 开发缓存问题 #

Vite缓存可能导致修改不生效，强制清除缓存并重启服务：

npm run dev -- --force

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