首先安装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’;
const app = createApp({});
// 可在此处注册全局组件
// app.component(‘example-component’, ExampleComponent);
app.mount(‘#app’);
确保你的主布局文件（如 resources/views/layouts/app.blade.php 或 welcome.blade.php）中包含挂载点和 Vite 脚本标签：
@vite([‘resources/css/app.css’, ‘resources/js/app.js’])
@vite 指令会自动加载开发或生产环境下的资源文件。
创建并使用 Vue 组件
在 resources/js/components 目录下创建一个 Vue 3 组件，例如 ExampleComponent.vue：
Hello from Vue 3!
然后在 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 的组合让前后端协作更流畅，开发体验更现代。只要注意路径配置和组件注册方式，集成过程并不复杂但容易忽略细节。
以上就是laravel如何集成Vue.js和Vite进行开发_Laravel集成Vue.js和Vite开发指南的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/136921.html
微信扫一扫 
支付宝扫一扫 
