Laravel 是一个优雅的 PHP WEB框架，在早期的版本中，一般是采用Mix搭配webpack来构建前端资源。 Vue 是一个渐进式 JavaScript 框架，Vite 是下一代前端开发和构建工具。那么这个组合起来，堪称绝美。

下面是我所使用的版本：

  • PHP 8.2
  • Laravel 11.8.0
  • Node 20.13
  • Vite 5.0
  • Vue 3.4

安装 Laravel 和 Vue

这里直接使用composer创建Laravel项目。

composer create-project laravel/laravel example-app

接下来，在Laravel项目中安装的package.json的中的默认依赖。

npm install

然后，在Laravel项目中安装的Vue和Vite插件。

npm install --save-dev vue@latest
npm install --save-dev @vitejs/plugin-vue

配置 Vite

Vite的配置文件是vite.config.js，修改内容如下：

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,
                },
            },
        }),
    ],
});

创建Vue应用并挂载组件

创建组件resources/js/components/App.vue，内容如下：

<template>
  <h1>Hello Laravel and Vue</h1>
</template>

在resources/js目录下的app.js文件，内容如下：

import './bootstrap';
import { createApp, ref } from 'vue'
import App from '../components/App.vue'

createApp(App).mount('#app')

引入 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>

启动 Laravel 和 Vite 服务

在Laravel项目根目录下，启动Laravel服务:

php artisan serve

在Laravel项目根目录下，启动Vue服务:

npm run dev

然后，打开浏览器访问http://127.0.0.1:8000，可以看到页面效果了。