Laravel/Inertia/Vue2升级Vue3：app.js配置迁移求助

核心问题分析 #

Vue2转Vue3、Laravel Mix切换到Vite后，原app.js中自动设置默认布局、加载组件i18n资源的逻辑，因resolvePageComponent的异步处理机制变化，直接沿用旧写法会导致组件返回值不符合Inertia要求，进而丢失布局等功能。

分步解决方案 #

1. 重构resolve逻辑，确保返回合规的组件Promise #

Inertia Vue3要求resolve函数返回Promise，需将布局注入、i18n加载逻辑封装到异步流程中：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import AppLayout from './Layouts/AppLayout.vue'
import { i18n } from './i18n' // 导入项目的i18n实例

createInertiaApp({
  resolve: async (name) => {
    // 1. 加载目标页面组件
    const page = await resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob('./Pages/**/*.vue')
    )

    // 2. 自动绑定默认布局（保留原项目逻辑）
    page.default.layout = page.default.layout || AppLayout

    // 3. 加载组件对应语言包（沿用原项目路径规则）
    const localeFile = `../lang/${i18n.locale}/${name.replace('.', '/')}.json`
    try {
      const messages = await import(localeFile)
      i18n.mergeLocaleMessage(i18n.locale, messages.default)
    } catch (err) {
      // 兼容无对应语言包的场景，保留原容错逻辑
    }

    // 4. 返回处理后的组件
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(i18n)
      .mount(el)
  },
})

2. 适配Vue3布局组件的插槽写法 #

Vue3中Inertia布局的插槽逻辑有变化，确保AppLayout.vue符合Vue3规范：

<!-- AppLayout.vue（Vue3版本） -->
<template>
  <div class="app-container">
    <!-- 布局头部、侧边栏等结构 -->
    <main class="content">
      <slot /> <!-- 替换Vue2的旧插槽写法 -->
    </main>
  </div>
</template>

3. Vite环境路径配置优化 #

若项目依赖自定义路径别名，在vite.config.js中补充配置，匹配原项目的资源路径习惯：

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: { transformAssetUrls: { base: null, includeAbsolute: false } },
    }),
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
      'lang': '/resources/lang',
    },
  },
});

4. 验证与调试 #

• 打开浏览器控制台，排查组件加载、i18n资源导入的报错信息
• 确认页面是否渲染AppLayout结构，切换语言时组件对应的语言包是否生效

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