首先安装laravel项目并进入目录，接着通过npm安装vue.js和Vite相关依赖，配置vite.config.js文件以支持Vue插件和Laravel集成，然后在resources/js/app.js中创建Vue应用实例并注册组件，确保Blade模板包含挂载点和@vite指令，最后创建Vue组件、在app.js中引入注册，运行npm run dev启动开发服务器，或npm run build生成生产资源，完成高效现代的前后端集成。
在现代前端开发中，Laravel 集成 Vue.js 和 Vite 已成为构建高效、响应迅速的单页应用（SPA）或混合渲染应用的主流选择。相比传统的 Laravel Mix，Vite 提供了更快的开发服务器启动速度和热更新体验。本文将一步步指导你如何在 Laravel 项目中集成 vue.js 和 Vite。
安装 Laravel 并准备项目
如果你还没有 Laravel 项目，先通过 composer 创建一个新的 Laravel 应用：
composer create-project laravel/laravel my-vue-app
进入项目目录：
cd my-vue-app
安装 Vue.js 和 Vite
Laravel 自 9.x 起已原生支持 Vite，但默认不包含 Vue。你需要手动安装 Vue 和相关依赖：
立即学习“前端免费学习笔记（深入）”；
npm install vue@next
npm install @vitejs/plugin-vue –save-dev
安装完成后，在项目根目录创建 vite.config.js 文件：
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,
},
},
}),
],
});
配置 javaScript 入口文件
编辑 resources/js/app.js，初始化 Vue 应用：
import ‘./bootstrap‘;
import { createApp } from ‘vue’;
// 可在此处注册全局组件
// app.component(‘example-component’, ExampleComponent);
app.mount(‘#app’);
确保你的主布局文件（如 resources/views/layouts/app.blade.php 或 welcome.blade.php）中包含挂载点和 Vite 脚本标签：
<div id=”app”>
<example-component />
</div>
@vite([‘resources/css/app.css’, ‘resources/js/app.js’])
@vite 指令会自动加载开发或生产环境下的资源文件。
创建并使用 Vue 组件
在 resources/js/components 目录下创建一个 Vue 3 组件，例如 ExampleComponent.vue：
<script setup>
</script>
<template>
<div>
<h1>Hello from Vue 3!</h1>
</div>
</template>
然后在 app.js 中引入并注册该组件：
import ExampleComponent from ‘./components/ExampleComponent.vue’;
const app = createApp({});
app.component(‘example-component’, ExampleComponent);
app.mount(‘#app’);
启动开发服务器
运行 Vite 开发服务器：
npm run dev
这将启动 Vite 的本地服务器，默认监听 http://localhost:5173，并通过 Laravel 处理路由请求。
访问你的 Laravel 应用（如 http://my-vue-app.test），你应该能看到 Vue 组件正确渲染。
构建生产资源
部署前，运行以下命令生成压缩后的静态资源：
npm run build
Vite 会将资源输出到 public/build 目录，Laravel 会自动引用这些文件。
基本上就这些。Laravel + Vue + Vite 的组合让前后端协作更流畅，开发体验更现代。只要注意路径配置和组件注册方式，集成过程并不复杂但容易忽略细节。