Laravel 现在默认已经把前端资源构建切到 Vite，但很多人在第一次把 Vue 接进 Laravel 11 时，仍然会卡在“该装哪些包、入口放哪、模板怎么挂载”这几个点上。本文按实际可运行的顺序，把安装、Vite 配置、Vue 挂载和 Blade 入口串起来，读完后你可以直接对照文件位置和命令，快速确认自己的项目是否搭建正确。
版本与环境
先看本文使用的环境版本，后面的命令与配置都基于这套组合：
- PHP 8.2
- Laravel 11.8.0
- Node 20.13
- Vite 5.0
- Vue 3.4
如果你的主版本差异不大，整体步骤通常可以直接复用；如果版本跨度较大，重点先核对 laravel-vite-plugin 与 @vitejs/plugin-vue 的行为是否一致。
先把 Laravel 项目和 Vue 依赖装起来
第一步是创建 Laravel 项目。这里直接使用 composer 初始化：
composer create-project laravel/laravel example-app项目创建完成后，先安装 package.json 里的默认前端依赖：
npm install接着再补上 Vue 和 Vite 的 Vue 插件：
npm install --save-dev vue@latest
npm install --save-dev @vitejs/plugin-vue这里的顺序很重要：先把 Laravel 默认依赖装完整，再额外加入 Vue 相关包，后面修改配置时更不容易遗漏基础构建能力。
Vite 需要怎么配
Laravel 中的 Vite 配置文件是 vite.config.js。在这个文件里，除了保留 Laravel 插件，还要加入 Vue 插件，让 .vue 单文件组件可以正常参与开发和构建。
修改后的内容如下：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/css/app.css', 'resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
},
}),
],
});这段配置里有两个关键点：
Laravel 插件负责资源入口
laravel(['resources/css/app.css', 'resources/js/app.js']) 指定了 Laravel 侧需要交给 Vite 处理的资源入口。也就是说，后面 Blade 模板里通过 @vite 引入的，最终就是这两个入口文件。
Vue 插件负责识别单文件组件
vue() 让 Vite 能处理 App.vue 这样的组件文件，而 transformAssetUrls 这部分则是在 Laravel 与 Vite 的资源路径改写之间做兼容，避免组件里的资源引用在开发环境下出现路径指向错误。
创建 Vue 组件并完成挂载
配置好 Vite 后，接下来才是 Vue 应用本身。先创建组件文件 resources/js/components/App.vue：
<template>
<h1>Hello Laravel and Vue</h1>
</template>然后修改 resources/js/app.js，在这里创建 Vue 应用并挂载到页面节点：
import './bootstrap';
import { createApp, ref } from 'vue'
import App from '../components/App.vue'
createApp(App).mount('#app')这里真正决定页面能否显示 Vue 内容的，是这两件事：
- 是否正确引入了
App.vue - 是否把应用挂载到了页面中存在的
#app节点
其中 ref 虽然在这段示例代码里并没有实际使用，但不影响基础运行。想保持入口更简洁的话，后续也可以再移除未使用的导入。
Blade 模板里怎样接入 Laravel 入口
Vue 应用已经准备好之后，还需要在 Laravel 的视图里把资源入口和挂载节点接上。这里使用 resources/views/welcome.blade.php 作为示例：
<!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/css/app.css')
</head>
<body id="app">
</body>
@vite('resources/js/app.js')
</html>这一步最容易忽略的是“入口引入”和“挂载目标”必须同时存在：
@vite('resources/css/app.css')和@vite('resources/js/app.js')负责把资源交给 Vite 输出<body id="app">则提供了createApp(App).mount('#app')对应的挂载位置
如果页面空白，通常先检查这里：要么 @vite 没引对入口，要么页面里没有和 #app 对应的节点。
最后启动 Laravel 和 Vite
完成文件配置后，还要分别启动 Laravel 服务和 Vite 开发服务。
先在项目根目录启动 Laravel：
php artisan serve再在项目根目录启动前端开发服务：
npm run dev随后打开浏览器访问 http://127.0.0.1:8000，如果前面的步骤都没有问题，就能看到页面输出的 Hello Laravel and Vue。
从实际排查角度看，这套组合能否跑起来，核心就是四个检查点：依赖是否安装完整、vite.config.js 是否加入 Vue 插件、Blade 是否写了 @vite 入口、页面里是否存在 #app 挂载节点。只要这几个环节都对上，Laravel 11 + Vite 5 + Vue 3 的最小可运行项目就搭好了。
