在开发laravel过程中怎么集成Vite

系统管理员 2024-03-23 12:09 84阅读 0赞

本文将介绍如何在 Laravel 中集成 Vite，以实现更快的前端开发体验。Vite 是一个基于 Rollup 的构建工具，它采用了现代化的开发方式，在开发阶段采用了“原生 ES 模块”方式，使得开发者在开发时能够快速地进行热重载，减少开发调试时间。

本文中，我们将会使用 Laravel 8.x 作为我们的后端框架，使用 Vite 2.x 作为我们的前端构建工具。

## 环境要求 ##

在开始本教程之前，我们需要确保我们的开发环境中已经安装好了以下软件：

PHP 7.4 或更高版本  
Composer  
Node.js 12.0 或更高版本  
npm 6.0 或更高版本  
创建 Laravel 项目  
首先，我们需要创建一个新的 Laravel 项目。在命令行中运行以下命令：

laravel new my-app

这将会创建一个名为 my-app 的新 Laravel 项目。

## 安装 Vite ##

接下来，我们需要在项目中安装 Vite。在命令行中运行以下命令：

npm init -y
    npm install vite --save-dev

这将会初始化一个新的 npm 项目，并安装 Vite 到我们的项目中。

## 配置 Vite ##

在项目根目录下创建一个名为 vite.config.js 的文件，并添加以下内容：

module.exports = {
        
      build: {
        
        outDir: '../public/assets',
        emptyOutDir: true,
        manifest: true,
        rollupOptions: {
        
          input: 'resources/js/app.js',
        },
      },
      server: {
        
        port: 3000,
        proxy: {
        
          '/': 'http://localhost:8000',
        },
      },
    };

上述配置文件中，我们将 Vite 的构建输出目录设置为 public/assets，并且启用了 Manifest，以便我们能够正确地加载构建后的资源。同时，我们还将 Vite 的开发服务器端口设置为 3000，并将所有请求代理到 Laravel 的开发服务器上。

## 配置 Laravel Mix ##

接下来，我们需要对 Laravel Mix 进行一些配置，以便它能够正确地加载 Vite 构建后的资源。在 webpack.mix.js 文件中添加以下内容：

const mix = require('laravel-mix');
    
    mix.setPublicPath('public')
       .js('resources/js/app.js', 'public/js')
       .postCss('resources/css/app.css', 'public/css', [
           require('tailwindcss'),
       ])
       .webpackConfig(require('./node_modules/vite/distro/config/vite.webpack.config.js'));
    
    if (mix.inProduction()) {
        
        mix.version();
    }

上述配置文件中，我们将 Laravel Mix 的输出目录设置为 public，并将 JS 和 CSS 文件输出到 public/js 和 public/css 目录下。同时，我们还使用了 Vite 的 webpack 配置文件，以便 Mix 能够正确加载 Vite 构建后的资源。如果我们在生产环境中构建项目，则会使用 Mix 的版本化功能来自动为文件名添加哈希值。

## 创建前端项目 ##

现在，我们可以创建一个新的前端项目，并将其与 Laravel 项目进行集成。在命令行中运行以下命令：

npm init vite@latest resources/js -- --template vue

这将会使用 Vite 的 Vue 模板创建一个新的前端项目，并将其保存在 resources/js 目录下。

## 集成前端项目 ##

接下来，我们需要将前端项目与 Laravel 项目进行集成。首先，我们需要将前端项目的入口文件更改为 resources/js/app.js，以便 Laravel Mix 能够正确地加载它。

接着，我们需要将前端项目中的所有静态资源输出到 Laravel 项目的 public 目录中。我们可以通过修改 vite.config.js 文件来实现这一点：

上述配置文件中，我们将 Vite 的 publicDir 选项设置为 …/public，以便能够正确地输出前端项目中的静态资源。

最后，我们需要修改 resources/views/welcome.blade.php 文件，以便能够正确地加载前端项目的入口文件。在文件中添加以下内容：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Laravel</title>
            <link rel="stylesheet" href="{
         { mix('css/app.css') }}">
        </head>
        <body>
            <div id="app"></div>
            <script src="{
         { mix('js/app.js') }}"></script>
        </body>
    </html>

上述代码中，我们使用了 mix 函数来加载前端项目的入口文件和 CSS 文件。

## 运行项目 ##

现在，我们可以运行我们的 Laravel 项目，以测试 Vite 是否能够正确地与 Laravel 集成。在命令行中运行以下命令：

php artisan serve

然后，在另一个命令行中运行以下命令：

npm run dev

这将会启动 Laravel 开发服务器和 Vite 开发服务器，并在浏览器中打开我们的项目。如果一切正常，我们应该能够看到前端项目正常运行，并且在修改代码时能够自动热重载。

## 总结 ##

本文中，我们介绍了如何在 Laravel 中集成 Vite，以实现更快的前端开发体验。通过使用 Vite，我们能够采用现代化的开发方式，在开发阶段能够快速地进行热重载，减少开发调试时间，并提高开发效率。