如何在InertiaJS与Laravel 8环境中禁用devtools

方法1：前端硬编码强制关闭（直接生效） #

找到项目前端入口文件 resources/js/app.js，修改Inertia初始化配置，同时关闭Vue Devtools和Inertia Devtools：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  // 禁用Inertia专属Devtools
  devtools: false,
  setup({ el, app, props, plugin }) {
    const vueApp = createApp({ render: () => h(app, props) })
      .use(plugin)
      // 禁用Vue Devtools
      vueApp.config.devtools = false
      
    vueApp.mount(el)
  },
})

修改完成后重新执行npm run dev或npm run watch即可生效。

方法2：通过环境变量动态控制（适配多环境，推荐） #

可以根据开发/生产环境自动切换Devtools开关，无需手动改代码：

1. 在Laravel项目根目录的.env文件中新增配置项（生产环境设为false，开发环境设为true）：

MIX_INERTIA_DEVTOOLS=false

2. 修改resources/js/app.js的配置，读取环境变量动态赋值：

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  devtools: process.env.MIX_INERTIA_DEVTOOLS === 'true',
  setup({ el, app, props, plugin }) {
    const vueApp = createApp({ render: () => h(app, props) })
      .use(plugin)
      vueApp.config.devtools = process.env.MIX_INERTIA_DEVTOOLS === 'true'
      
    vueApp.mount(el)
  },
})

• 如果你手动将Laravel8的打包工具从默认的Mix替换为Vite，只需要将环境变量前缀改为VITE_，前端通过import.meta.env.VITE_INERTIA_DEVTOOLS读取即可。

补充注意事项 #

• 生产环境部署时务必执行npm run production打包代码，即使没有手动配置，打包工具默认也会关闭所有devtools，手动加配置属于双重保险
• 所有前端配置修改后，都需要重新执行前端打包命令才能生效

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