Laravel-vite+vue开发前端模板

jiay2

已于 2025-04-21 16:12:44 修改

阅读量487

点赞数 3

分类专栏：脱发启示录鼓捣经验 Laravel 文章标签： javascript 前端 laravel vue.js

于 2025-04-20 22:14:27 首次发布

本文链接：https://blog.csdn.net/jiay2/article/details/147374677

版权

脱发启示录同时被 3 个专栏收录

18 篇文章

订阅专栏

鼓捣经验

12 篇文章

订阅专栏

Laravel

1 篇文章

订阅专栏

开始这篇文章的时候，你已经安装了laravel！你已经安装了laravel！你已经安装了laravel！

然后你的laravel服务器环境已经搭建好，应用可以正常访问

laravel vite plugin 官方原文

laravel默认已经集成vitejs,单纯使用vite只需要执行以下命令即可

npm install

但是这里我们需要使用vue作为前端框架

npm install @vitejs/plugin-vue

node依赖安装完成后，然后执行下面的命令

npm run build
// or
num run dev

开发过程当然是走dev。

num run dev 这条命令执行以后，控制台大概是这样的：


  VITE v6.3.2  ready in 359 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v12.9.2  plugin v1.2.0

  ➜  APP_URL: http://localhost

注意这上面的两个链接，这是由vite插件生成的。我们不用管它。

手痒可以点开浏览器看看。看完关掉就好了

！！！！！但是哈！！！！！！

控制台窗口不要关！！！！！！

这个是前端开发环境的热插拔服务，

挂着这个窗口，我们正常访问laravel应用入口，可以看到一个demo页面

现在我们用浏览器挂着这个页面。

接下来修改应用根目录下的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/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,
                },
            },
        }),
    ],
});

到这里我们可以看到浏览器窗口的变化（css样式没了）,but.别急！

然后再laravel根目录下找到resources,

打开js路径添加一个Pages文件夹用来存放模板组件，你也可以起其他名字

然后新建一个Index.vue文件

接下来到vue官方文档复制一个Hello World贴到刚才创建的./Pages/Index.vue文件中

或者你也可以自己写一个demo (我超懒)

<!--
跟 Vue 说 Hello World！
-->

<script setup>
import { ref } from 'vue'

// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
// 但是在下一个示例中更改这个值的时候，我们就需要它了。
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

然后按照官方文档挂载组件：

打开./resources/js/app.js文件

import { createApp } from 'vue';
import Index from './Pages/Index.vue';

const app = createApp(Index);

app.mount('#app');

laravel的vite插件依旧是Blade模板的一个扩展。

所以接下来最后一步是把刚才的vue代码导入Blade

现在我们添加一个blade模板文件

打开./resources/views/

将默认的welcome.blade.php文件复制一个到当前目录，我给他起名index.blade.php

修改路由文件routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    return view('index'); //将默认模板改为index
});

接下来修改index.blade.php

清空模板文件里<body>标签的全部内容(水一下文)

    <body>
    </body>

刷新浏览器，确认你看到的页面已经是一片空白

接下来就是见证奇迹的时刻：给清空的<body>标签添加一个名为app的id属性

    <body id="app">
    </body>

然后刷新浏览器，你能正常看到Hello World!

本章就写到这里了！

有空再写laravel的模板标签在vue输出

下面附带一个完整的index.blade.ph

<!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>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <style></style>
        @endif
    </head>
    <body id="app">
    </body>
</html>