Laravel 作为一个全栈开发框架，天然支持把前后端集成在一起开发，避免了前后端两个项目在不同开发工具中进行切换，节省很多时间，开发体验更好，真是自由全栈开发者的一大利器。
在本文中，我们将使用 vite 在 laravel 9 中安装 vue 3。
创建 Laravel 项目
composer create-project laravel/laravel laravel-vite-vue安装 vue 3 和 vue-loader
npm install vue@next vue-loader@next安装 plugin-vue
npm i @vitejs/plugin-vue安装其它依赖
npm install编辑 vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});修改 resources/js/app.js
import './bootstrap';
import { createApp } from 'vue';
import app from './Page/app.vue'
createApp(app).mount("#app")在 resources/Page 文件夹下添加 app.vue，内容如下
<template>
<h1>
Laravel 9 vite with vue 3
</h1>
</template>编辑 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 9 with vue 3 vite</title>
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>执行 npm run dev 和 php artisan serve 。
最后打开 http://localhost:8000 就可以看效果了。
对于高版本Laravel，应该大同小异，以此为参考进行。
本文为“技术点滴”的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。