Laravel+Inertia项目中createInertiaApp重复执行两次问题求助

问题现象 #

Laravel + Inertia应用搭建完成后，createInertiaApp() 出现重复执行表现：在resolve回调中添加的console.log("123")调试日志在控制台共打印2次，相关配置代码如下：

app.js 代码 #

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import DefaultLayout from "../../views/layouts/default";
import { createPinia } from "pinia";
import { importComponent } from "./import-component.js";
import { ZiggyVue } from "ziggy";
import { Ziggy } from "../../js/ziggy";
import { InertiaProgress } from "@inertiajs/progress";

InertiaProgress.init();
createInertiaApp({
  resolve: (name) => {
    console.log("123");
    const component = importComponent(name);

    // 组件未自定义布局时默认挂载全局布局
    component.default.layout ??= DefaultLayout;
    return component;
  },
  setup({ el, App, props, plugin }) {
    const pinia = createPinia();
    const app = createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(pinia)
      .mixin({ methods: { route: window.route } })
      .use(ZiggyVue, Ziggy);

    // 全局注入登录用户信息
    app.config.globalProperties.$auth = props.initialPage.props.auth;
    app.mount(el);
  },
});

webpack.mix.js 配置 #

mix
  .js("resources/assets/js/app.js", "public/js")
  .sass("resources/assets/sass/app.scss", "public/css")
  .webpackConfig(aliasesConfig)
  .sourceMaps()
  .vue({ version: 3 })
  .ziggy()
  .version();

控制台异常表现 #

排查方向与修复方案 #

注意：resolve回调执行两次不等于createInertiaApp整体重复初始化，多数场景属于框架正常执行逻辑，不属于代码bug，按以下优先级逐一排查即可：

• 优先确认是否为框架默认行为：Inertia初始化时会先执行一次组件解析做初始页面合法性校验，后续实际挂载渲染阶段会再次执行resolve加载目标组件，这种场景下的两次执行完全不影响业务运行，也不会导致重复挂载、状态重复注入问题，直接移除调试日志即可，不需要额外修改代码。
• 检查页面JS资源引入是否重复：打开浏览器开发者工具-网络面板，筛选JS请求，查看编译后的app.js是否被加载了两次。如果Blade模板中同时存在手动写的<script>标签引入app.js，和Mix/@vite助手函数自动输出的script标签，删掉手动添加的重复引入即可；如果开启了热更新模式，确认没有同时引入本地构建的静态js和热更新服务的js资源。
• 校验自定义importComponent方法逻辑：如果自定义的动态导入方法内部存在重复回调、重复执行逻辑，会间接导致resolve触发两次。可以临时替换为Inertia官方推荐的原生导入写法测试：

  resolve: name => {
    const page = require(`./Pages/${name}`).default
    page.layout ??= DefaultLayout
    return page
  }
  

  替换后如果日志只打印一次，修复自定义导入方法的逻辑即可。
• 排查浏览器插件影响：旧版本Vue Devtools等开发类插件，会在Vue应用初始化阶段强制触发一次重渲染，间接导致Inertia的resolve回调重复执行，打开浏览器无痕模式禁用所有插件后重新测试即可确认。

只有当两次执行伴随出现Pinia状态重复初始化、路由守卫重复触发、全局事件多次绑定的实际业务异常时，才需要做针对性修复。如果没有上述异常，两次resolve执行属于正常流程，不影响生产环境运行。

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