告别 Artisan，拥抱 Vite：Laravel 和 Vue.js 项目集成指南

摆脱 Artisan 命令：使用 Vite 集成 Laravel 和 Vue.js 项目

简介

对于 Laravel 与 Vue.js 开发人员来说，Vite 作为构建工具日益流行。它提供了众多优势，包括更快的构建速度、热模块替换以及与 Vue 3 的无缝集成。然而，脱离 Artisan 命令，使用 Vite 运行 Laravel 和 Vue.js 项目可能带来一些挑战。本文将深入探讨这一过程，解决常见错误并提供分步指南。

安装 Vite

开始之前，确保你的系统已安装 Vite：

npm install --save-dev vite

创建 Vite 配置文件

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

import { defineConfig } from 'vite';
import laravel from 'vite-plugin-laravel';

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.js',
      refresh: true,
    }),
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
    },
  },
});

修改 Laravel Mix 配置文件

接下来，在 webpack.mix.js 文件中添加以下内容：

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .webpackConfig(require('./vite.config.js'));

运行 Vite

使用以下命令启动 Vite：

npm run dev

Vite 将在监视模式下运行，并在每次保存更改时重新加载页面。

解决缺少资产错误

构建后，你可能会遇到以下错误：

my-project-name/build/assets/app-BuhR5ZK0.js net::ERR\_ABORTED 404 (Not Found)

这是因为构建后的资产未正确复制到 public 目录。为此，请在 package.json 文件的 scripts 部分添加以下命令：

"scripts": {
  "build": "mix && cp -r public/build/ assets/",
  "dev": "npm run watch",
  "watch": "mix watch"
}

运行 npm run build 以构建项目。这将复制构建后的资产到 public/assets 目录，并解决错误。

结论

通过遵循这些步骤，你可以脱离 Artisan 命令，成功使用 Vite 集成 Laravel 和 Vue.js 项目。Vite 为开发人员提供了更好的性能和体验，使其成为 Laravel 和 Vue.js 开发的理想选择。

常见问题解答

1. 为什么使用 Vite 代替 Artisan 命令？

Vite 提供了更快的构建速度、热模块替换和与 Vue 3 的紧密集成，从而改善了开发体验。

2. Vite 配置文件中的 input 选项是什么意思？

input 选项指定 Vite 应处理的 Vue.js 入口文件。

3. mix.webpackConfig 的作用是什么？

它允许将 Vite 配置应用到 Laravel Mix 构建管道中。

4. cp -r 命令有什么作用？

它将构建后的资产从 public/build/ 目录复制到 public/assets/ 目录，解决缺少资产的问题。

5. Vite 可以用于 Laravel 9 还是仅限于 Laravel 8？

Vite 可用于 Laravel 8 和 Laravel 9。