Laravel 9 + Vite + Vue项目配置后出现空白页且Vue代码未加载问题求助

我之前也碰到过这种无报错的空白页问题，简直是排查噩梦！咱们一步步拆解你的配置，找出问题所在：

1. 修正package.json中的错误与依赖问题 #

首先看你的package.json，有几个明显的问题：

• 构建脚本拼写错误：vite bumpild是笔误，应该是vite build，非SSR项目不需要--ssr参数；
• 多余的Vue2依赖：vue-template-compiler是Vue2的模板编译工具，Vue3已经内置了相关功能，这个包会导致版本冲突，直接删掉；
• laravel-vite-plugin版本过旧（0.3.0），建议升级到兼容Laravel 9的最新版本。

修正后的package.json关键部分：

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@inertiajs/inertia": "^0.11.0",
    "@inertiajs/inertia-vue3": "^0.6.0",
    "@inertiajs/progress": "^0.2.7",
    "@tailwindcss/forms": "^0.5.2",
    "@vitejs/plugin-vue": "^2.3.3",
    "autoprefixer": "^10.4.2",
    "axios": "^0.25",
    "lodash": "^4.17.19",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.1.0",
    "vue": "^3.2.31",
    "vue-loader": "^16.8.3"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@popperjs/core": "^2.11.5",
    "laravel-vite-plugin": "^0.7.5",
    "madge": "^5.0.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "survey-vue": "^1.9.38",
    "vite":"^2.9.14"
  }
}

2. 修复vite.config.js的配置问题 #

你的vite.config.js缺少必要的模块导入，而且Vue的别名配置会导致冲突：

• 必须先导入defineConfig、laravel和vue插件；
• 删除多余的vue别名，Vite会自动解析Vue3的正确入口文件。

修正后的vite.config.js：

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

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

3. 修正app.js的Vue导入与初始化问题 #

你手动指定Vue的导入路径是错误的，而且初始化代码有两处小问题：

• 直接从vue导入即可，不需要写完整的node_modules路径；
• setup函数中需要返回App实例（确保mount逻辑正常执行）；
• 导入了ZiggyVue但没有注册，需要添加.use(ZiggyVue)。

修正后的app.js：

import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
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);
  },
});

InertiaProgress.init({ color: '#4B5563' });

4. 清理缓存并重新构建 #

做完以上修改后，执行以下步骤确保环境干净：

• 删除旧依赖和锁文件：rm -rf node_modules package-lock.json
• 重新安装依赖：npm install
• 清理Laravel缓存：php artisan cache:clear && php artisan config:clear
• 重启Vite开发服务器：npm run dev

最后检查Blade模板 #

确保你的根模板（比如resources/views/app.blade.php）正确引入了Vite资源和Inertia容器：

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

这些修改应该能解决你的空白页问题，核心问题集中在依赖冲突、配置拼写错误和错误的模块导入路径上。

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