如何合并Laravel后端与Vue前端项目并适配Inertia

不需要完全重写前端，通过少量重构即可完成适配，原有绝大多数业务代码可以直接复用。

项目结构调整前置操作 #

• 把原Nuxt前端目录下的组件、工具函数、状态管理、静态资源、样式文件整体迁移到后端项目的resources/js目录下，直接剔除Nuxt专属的nuxt.config.js、pages下的路由配置逻辑、.nuxt缓存目录、Nuxt相关依赖，这些内容Inertia架构下不需要。
• 后端先完成Inertia基础安装：如果是Laravel后端，执行composer require inertiajs/inertia-laravel，按官方文档生成Inertia中间件、配置根blade模板，模板内预留@inertiaHead和@inertia挂载点即可。

app.js入口改造方法 #

入口改造是联通前后端的核心，原有业务组件不需要做框架层面的修改，只需要在入口处对齐原有全局配置即可。
以Vue3技术栈为例，改造后的resources/js/app.js参考如下：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
// 以下引入的都是原Nuxt项目里已经写好的全局内容，直接迁移路径即可
import pinia from './store/pinia'
import globalComponents from './plugins/global-components'
import directives from './plugins/directives'
import '../css/app.css'

createInertiaApp({
  // 自动加载迁移过来的页面组件，不需要修改组件本身代码
  resolve: (pageName) => {
    const pageModules = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pageModules[`./Pages/${pageName}.vue`]
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
    // 对齐原Nuxt项目的全局挂载逻辑，保证原有组件调用全局属性不报错
    app.use(plugin)
    app.use(pinia)
    app.use(globalComponents)
    app.use(directives)
    // 原项目自定义的全局过滤器、挂载在原型上的通用方法都在这里绑定
    app.mount(el)
  }
})

适配边界说明（哪些不用改，哪些要改） #

• 完全不需要改动的部分：通用UI组件、工具函数、状态管理模块、全局样式、非路由相关的业务逻辑，这部分占原前端代码量的80%以上，只要修正文件引入路径即可正常运行。
• 需要小范围调整的部分：
  • 原Nuxt专属语法：比如nuxt-link替换为Inertia提供的Link组件，useAsyncData/useFetch这类Nuxt专属hook，要么把数据获取逻辑移到后端Inertia渲染时通过props传给页面，要么改成组件挂载后正常发接口请求，改动量很小。
  • 原前后端分离的路由逻辑全部删除：Inertia路由由后端定义，后端路由中直接返回Inertia::render('页面组件路径')即可完成页面映射，不需要前端维护路由表。
  • 页面跳转、表单提交类的请求：可以替换为Inertia提供的router.visit()、useForm()方法实现无刷新交互，非跳转类的接口请求依然可以保留原有的axios调用逻辑，两者不冲突。

注意事项 #

迁移后前端依赖里只需要保留UI库、状态管理、工具类相关的包，以及Inertia对应的前端依赖，不需要安装任何Nuxt相关包，避免依赖冲突。

内容的提问来源于stack exchange，提问作者Jo Le Belge