为什么 Laravel Vite 指令在我的项目中不起作用？

问题描述 投票：0回答：11

我根据laravel给出的文档安装并配置了laravel Breeze和blade。默认情况下它使用 Vite，但不知何故 @vite 指令在我的项目中不起作用，我不知道我错过了什么。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ]
});

vite 正在正确编译我的 js 和 css 资源：

然后我使用 

@vite
指令创建了一个测试刀片模板：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
    Hello World
</div>
</body>
</html>

我的测试路线：

Route::get('/nice', function () {
    return view('test');
});

下面的输出显示 

@vite
未生成适当的脚本和链接资产标签：

我的开发环境是homestead，并且我有laravel mix，因为我正在慢慢地将我们的前端升级为vite。我希望这里有人能够帮助我解决问题，谢谢。

laravel laravel-blade vite
11个回答
29
投票

Laravel 8 文档说使用以下命令安装 laravel Breeze。

composer require laravel/breeze --dev

但这将安装最新版本的 Breeze (^1.10)，支持 Laravel 9 Vite。由于 Laravel 8 不支持 Vite，因此您必须使用旧版本的 laravel Breeze。版本 1.9.4 适用于 Laravel 8。

因此请尝试以下命令来安装 laravel Breeze：

composer require laravel/breeze:1.9.4
11
投票

升级框架版本后必须使用命令清除视图缓存：

php artisan view:clear

那么这个新的刀片指令必须正常工作。

2
投票

尝试解决我自己的问题，我为您的问题找到了解决方案！

全新、开箱即用的 Breeze 安装使用了一堆组件。这些可以在应用程序的 

resources/views/components
文件夹中找到。默认情况下，Breeze 还附带 2 个布局组件：

  • app/View/Components/AppLayout.php
  • app/View/Components/GuestLayout.php

这些布局组件的HTML结构可以在：

找到 
  • resources/views/layouts/app.blade.php
  • resources/views/layouts/guest.blade.php

这些布局用于根据用户是否登录来包装调用视图的内容。

在您的情况下，您尝试访问 URL 

/nice
，它返回 
test.blade.php
视图。该视图的渲染没有任何 
<html>
、
<body>
或任何其他“包装”html 标签，因为没有引用任何布局。

例如，假设您的 

test.blade.php
只能由登录用户查看。尝试将 
test.blade.php
文件更改为：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Test') }}
        </h2>
    </x-slot>

    <div class="font-sans text-gray-900 antialiased">
        Hello World
    </div>
</x-app-layout>

通过将内容包装在 

x-app-layout
标签之间（对于来宾用户，为 
x-guest-layout
标签），基本上就是说 Laravel 应该将 
test.blade.php
的内容渲染到 
resources/views/layouts/app.blade.php
文件的默认槽中。

上面的示例代码还展示了如何从 

resources/views/layouts/app.blade.php
内部填充 
test.blade.php
的插槽。 
<x-slot name="header">
标签的内容放置在声明
{{ $header }}
的位置，就像集合从控制器传递到视图的方式一样。

在文档（此处）中，您可以找到组件在 Laravel 中的工作方式。

2
投票

清除应用程序缓存后对我有用

php artisan optimize:clear
1
投票

Laravel 版本必须是 

^9.19
才能使用 Vite。

// composer.json

"require": {
    "laravel/framework": "^9.19",
},
1
投票

在您的 

docker-composer.yml
文件中将 HMR 端口更新为 
'${HMR_PORT:-5173}:5173'
或者您的 vite 开发服务器为您的资产提供服务的任何端口。

    laravel.test:
    build:
        context: ./docker/8.1
        dockerfile: Dockerfile
        args:
            WWWGROUP: '${WWWGROUP}'
    image: sail-8.1/app
    extra_hosts:
        - 'host.docker.internal:host-gateway'
    ports:
        - '${APP_PORT:-80}:80'
        - '${HMR_PORT:-5173}:5173'
    environment:
        WWWUSER: '${WWWUSER}'
        LARAVEL_SAIL: 1
        XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
        XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
    volumes:
        - '.:/var/www/html'
    networks:
        - sail
    depends_on:
        - mysql
        - redis
        - meilisearch
        - selenium
1
投票

我使用这个Referecnce让我的项目与vite一起工作。

TLDR； 为了创建新指令，您需要将脚本添加到 

composer.json
文件的 Helper 函数中，并将其添加到 
files
数组中。请参阅下面的示例

打开 

composer.json
，它应该位于 Laravel 项目的 
root
中，找到以下部分：

 "autoload": {
    "files": [
      "app/Helpers/functions.php" // this is where you can load your code
    ],
    "psr-4": {
     ...
    }
  },

然后在安装的同一个根作曲家中，以便您可以在终端中运行以下命令

composer autodump --optimize-autoloader
初始化以在脚本中使用

1
投票

只需转到 config/app.php 并：

 'url' => env('APP_URL', 'http://localhost'),
 // 'asset_url' => env('ASSET_URL', '/'),
 'asset_url' => env('APP_URL', '/'),

之后，跑步

 php artisan config:clear

.env 文件可能不包含 ASSET_URL 参数。只需将 ASSET_URL 设置为与 APP_URL 相同即可

所有 404 NOT FOUND 错误都可以追溯到 URL 配置错误

0
投票

昨天我也遇到了同样的错误，在谷歌搜索了太多之后我找不到任何可行的解决方案。 就我而言，我使用 Laravel 8.83 和 Breeze 1.10.2 进行用户注册并使用 PHP 7.4 进行身份验证。 

php artisan install:breeze
命令一次又一次失败。

就我而言，我使用较低版本的微风修复了它，即1.9.4，在使用此版本的微风后

php artisan install:breeze
成功运行，没有任何错误，并且所有其他站点功能都工作正常。

0
投票

我遇到了这个问题，这让我发疯了几天。

但是我找到了解决方案。

根据下面的指南，我需要将“vite.config.js 文件”重命名为“vite.config.mjs”，然后按照说明我转到 package.json 文件并添加此行：

//Add this line in the very top/first object.

> "type": "module"

它在 package.json 上应该是这样的，带有新属性“type”和值“module”：

{ “名称”：“myapp”， “版本”：“1.0.0”， “类型”：“模块” }

解决方案来自以下网址： https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only

-2
投票

@vite 适用于 Laravel 版本 9。*

you install Laravel 8 but you installed UI or other package maybe related to Laravel version 9.
so Please check your package version for Laravel 8 .
then install specific Version.
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.