laravel如何集成Vue.js和Vite进行开发_Laravel集成Vue.js和Vite开发指南-Laravel-PHP中文网

laravel如何集成Vue.js和Vite进行开发_Laravel集成Vue.js和Vite开发指南

尼克

发布： 2025-10-23 11:01:02

原创

222人浏览过

首先安装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进行开发_laravel集成vue.js和vite开发指南

在现代前端开发中，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 脚本标签：

<div id="app">
<example-component />
</div>

@vite(['resources/css/app.css', 'resources/js/app.js'])

@vite 指令会自动加载开发或生产环境下的资源文件。

创建并使用 Vue 组件

在 resources/js/components 目录下创建一个 Vue 3 组件，例如 ExampleComponent.vue：

集简云

软件集成平台，快速建立企业自动化与智能化

查看详情

然后在 app.js 中引入并注册该组件：

import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});
app.component('example-component', ExampleComponent);
app.mount('#app');