如何保留Blade视图将Laravel7+Vue2迁移至Laravel12+Vite+Vue3

完全可以沿用Blade与Vue组件混合的开发模式，这是当前最节省时间的迁移路径——既不用把所有Blade重写成Vue SPA，也不用转用Livewire重构代码。你的尝试方向是对的，下面补充一些关键细节帮你更高效落地：

1. 全局注册组件，避免重复挂载 #

你当前单个组件单独挂载的方式可以优化为全局注册，只需创建一个根Vue实例，批量注册组件后挂载到Blade的根容器，就能在模板内直接使用所有组件：

// resources/js/app.js
import { createApp } from 'vue/dist/vue.esm-bundler';
// 导入需要的组件
import ExampleComponent from './components/ExampleComponent.vue';
import UserProfile from './components/UserProfile.vue';

// 创建根Vue实例
const app = createApp({});

// 全局注册组件（kebab-case命名对应Blade里的标签）
app.component('example-component', ExampleComponent);
app.component('user-profile', UserProfile);

// 挂载到Blade的根容器
app.mount('#app');

对应的Blade模板只需保留一个根容器，内部直接使用组件标签：

<!-- resources/views/bladeview.php -->
<div id="app">
    <example-component></example-component>
    <user-profile></user-profile>
</div>

2. 组件参数传递的正确方式 #

Vue3的props传递逻辑和Vue2基本一致，在Blade里通过属性绑定传递数据即可：

• 静态字符串：直接用属性名="值"
• 动态数据（数字、布尔、服务端变量）：用:属性名="值"（绑定表达式）

示例：

<!-- Blade模板中传递参数 -->
<div id="app">
    <!-- 静态字符串参数 -->
    <example-component title="欢迎使用Vue3"></example-component>
    <!-- 动态传递当前登录用户数据 -->
    <user-profile :user-id="{{ auth()->id() }}" username="{{ auth()->user()->name }}"></user-profile>
</div>

Vue组件接收props（支持组合式或选项式API，兼容Vue2写法）：

<!-- 组合式API（setup语法） -->
<script setup>
const props = defineProps({
    title: String,
    userId: Number,
    username: String
});

// 使用props：props.title、props.userId
</script>

<!-- 选项式API（无需立刻重构Vue2代码） -->
<script>
export default {
    props: {
        title: String,
        userId: Number,
        username: String
    },
    // ...其他逻辑
}
</script>

3. 全局工具与状态管理集成 #

如果旧项目用到了HTTP请求或状态管理，可直接在全局Vue实例上集成：

集成Axios（处理Laravel CSRF） #

// app.js
import axios from 'axios';

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// 从Blade的meta标签获取CSRF令牌
const csrfToken = document.head.querySelector('meta[name="csrf-token"]')?.content;
if (csrfToken) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;
}

集成Pinia（Vue3状态管理，替代Vuex） #

// app.js
import { createPinia } from 'pinia';

const pinia = createPinia();
app.use(pinia);

4. Vue2组件迁移到Vue3的注意事项 #

• 过滤器（Filters）：Vue3移除了过滤器，可替换为全局方法或计算属性
• 生命周期钩子：beforeDestroy → beforeUnmount，destroyed → unmounted
• 事件绑定：移除了.native修饰符，直接在组件上绑定事件即可
• 选项式API兼容：Vue3完全支持Vue2的选项式API，不用强制改成组合式API，可以逐步迁移

5. Vite配置优化 #

确保vite.config.js正确配置Vue插件，处理组件内的资源路径：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

总结 #

这种Blade+Vue3的混合模式完全适配Laravel12，既保留了Blade服务端渲染的优势（比如SEO、快速首屏加载），又能复用现有Vue组件（只需少量适配Vue3语法），是当前成本最低的迁移方案。

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