Laravel+Vue+Inertia项目VDS部署时npm run build报错求助

针对你遇到的npm run dev正常但npm run build失败的问题，结合场景给出以下排查和解决步骤：

• 检查Vite路径别名配置
  确保vite.config.js中的别名映射正确，Laravel项目通常需要将@指向resources/js，配置示例：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue';
  import { fileURLToPath, URL } from 'node:url';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: 'resources/js/app.js',
        refresh: true,
      }),
      vue({
        template: {
          transformAssetUrls: {
            base: null,
            includeAbsolute: false,
          },
        },
      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
      },
    },
  });
  

  同时确认jsconfig.json中的路径映射和Vite一致，保证打包时路径解析正确：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["resources/js/*"]
      }
    },
    "exclude": ["node_modules", "public"]
  }
  

• 验证Inertia页面导入逻辑
  检查app.js中Inertia的页面解析配置，确保resolvePageComponent的路径匹配实际文件结构：

  import { createApp, h } from 'vue';
  import { createInertiaApp } from '@inertiajs/vue3';
  import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
  import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
  
  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(ZiggyVue)
        .mount(el);
    },
  });
  

  确认./Pages对应resources/js/Pages目录，glob表达式./Pages/**/*.vue能正确匹配所有页面组件。

• 检查Blade模板资源引入
  确保根模板（如resources/views/app.blade.php）使用@vite指令引入资源，不要硬编码路径：

  <!DOCTYPE html>
  <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Laravel</title>
      @vite(['resources/js/app.js'])
      @inertiaHead
  </head>
  <body>
      @inertia
  </body>
  </html>
  

• 清理依赖缓存并重装
  执行以下命令清理缓存、删除旧依赖后重新安装，排除依赖缓存导致的打包异常：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 查看详细错误日志
  执行npm run build --verbose获取完整错误信息，定位具体出错的文件或配置项，比如组件导入错误、静态资源路径问题等，针对性修复。

内容的提问来源于stack exchange，提问作者Зелёный Корень