如何在Laravel項目中設置Vite？

確保使用Laravel 9和PHP 8.0，因為VITE被支持開箱即用；升級如果在較舊版本上。 2。通過NPM安裝安裝Vite和必需的插件，或者如果丟失了Vite和Laravel-Vite-Plugin，以及 @vitejs/plugin-react或 @vitejs/plugin-vue等框架特定的插件。 3。創建或更新vite.config.js以包含帶有CSS和JS入口點的輸入路徑的Laravel插件，並啟用HMR之類的功能。 4。用@Vite指令列出相同的入口點，替換刀片模板中的@mix或硬編碼資產標籤，從而允許自動開發服務器集成和生產路徑分辨率。 5。更新package.json腳本，以包括“ dev”：“ vite”，“ build”：“ vite build”和“ vite build”和“ preview”：“ Vite Preview”，用於標準工作流操作。 6.運行NPM運行開發人員以HMR或NPM Run Build啟動Vite開發服務器，以將優化資產編譯為公共/構建//build/build/，其中Laravel讀取了正確的資產注入的清單。 7。可選地通過安裝相應的依賴項，使用適當的插件更新配置，並相應地調整文件擴展名和導入來配置框架支持（React/Vue）。 8。通過設置主機設置“ 0.0.0.0”並調整HMR設置，尤其是對Docker或共享環境中的Vite Server設置，例如HOST和port。 @Vite指令無縫處理開發環境和生產環境，利用本機ES模塊，並消除了對Laravel混合的需求，從而導致更快，更可擴展的構建過程與現代前端工作流平滑地集成。

在Laravel項目中設置Vite很簡單，尤其是當您使用Laravel 9或更高版本時，這支持Vite開箱即用。這是正確執行操作並開始使用Laravel應用程序使用現代前端工具的方法。

✅1。檢查Laravel和PHP版本

確保您使用的是Laravel 9和PHP 8.0 。 Vite從Laravel 9開始取代Laravel混合物，因此需要升級或手動配置較舊的版本。

如果您在Laravel 8或更早的情況下，請考慮手動升級或安裝Vite（不建議 - 更好地升級Laravel）。

✅2。通過NPM安裝Vite

在您的laravel項目root中運行此命令：

 NPM安裝

這會根據您的設置安裝默認依賴項，包括vite ， laravel-vite-plugin和@vitejs/plugin-react或類似的 @vitejs/插件。

如果未安裝Vite（例如，在較舊的項目中），請添加：

 NPM安裝 -  save-dev vite laravel-vite-plugin

還為您的前端框架安裝所需的插件（可選）：

 ＃for React
NPM安裝-Save-dev @vitejs/plugin-react

＃for Vue
NPM安裝-Save-dev @vitejs/plugin-vue

✅3。使用Laravel插件配置Vite

在您的項目root中創建一個vite.config.js文件（如果尚未存在）：

 // vite.config.js
從'vite'導入{decteConfig};
從“ laravel-vite-plugin”中導入laravel；

導出默認decteConfig（{
    插件：[
        laravel（{
            //指定您的入口點
            輸入：['resources/css/app.css'，'resources/js/app.js']，
            刷新：是的，
        }），
    ]，，
    //可選：如果您使用的是React或Vue
    // 解決： {
    //別名：{
    //'@'：'/resources/js'，
    //}，
    //}，
}）;

這告訴VITE您的主要CSS和JS文件在哪裡。

✅4。更新刀片模板要使用@vite

在您的主佈局文件（例如， resources/views/layouts/app.blade.php ）中，用以下方式替換@mix或硬編碼腳本標籤（例如：

 @vite（['resources/css/app.css'，'resources/js/app.js']）

該指令：

• 在npm run dev期間加載Vite Dev服務器
• 輸出正確的生產構建路徑
• 自動處理熱模塊更換（HMR）

？您只需要列出輸入點即可 - Vite將通過Imports解決其餘部分。

✅5。更新軟件包。 JSON腳本

確保您的package.json具有正確的腳本：

 “腳本”：{
    “ dev”：“ vite”，
    “構建”：“ Vite Build”，
    “預覽”：“ Vite Preview”
}

或者，如果您想要特定於Laravel的命名：

 “腳本”：{
    “ dev”：“ vite”，
    “構建”：“ Vite Build”，
    “服務”：“ Vite Preview”
}

✅6。啟動開發服務器或構建生產

在開發過程中：

 NPM運行開發

這啟動了Vite開發服務器（通常在http://localhost:5173上），並啟用HMR。

用於生產構建：

 NPM運行構建

這將資產彙編並將資產簡化為public/build/ 。

Laravel會自動讀取Vite（ public/build/.vite/manifest.json ）生成的清單文件，以注入正確的資產URL。

✅7。可選：使用別名或框架

反應示例

安裝React支持：

 NPM安裝React React-Dom

更新vite.config.js ：

導入從“@vitejs/plugin-react”中導入反應；

導出默認decteConfig（{
    插件：[
        laravel（{
            輸入：['Resources/js/app.jsx']，
            刷新：是的，
        }），
        react（），
    ]，，
}）;

然後使用.jsx文件並導入正常反應。

vue示例

從'@vitejs/plugin-vue'導入vue;

導出默認decteConfig（{
    插件：[
        laravel（{
            輸入：“資源/js/app.js”，
        }），
        vue（{
            模板： {
                transformAsseturls：{
                    基礎：null，
                    包括：false，
                }，，
            }，，
        }），
    ]，，
}）;

✅8。環境和URL處理

如果您需要自定義Vite Server主機或端口，請創建.env.local或更新VITE配置：

導出默認decteConfig（{
    伺服器: {
        主持人：“ localhost”，
        港口：5173，
        HMR：{
            主持人：“ localhost”，
        }，，
    }，，
    插件：[...]，
}）;

對於共享環境（例如代客或Docker），您可能需要設置host: '0.0.0.0'並調整hmr.host 。

最後筆記

• @vite Blade指令很聰明 - 它在開發和生產中都起作用。
• 除非您正在測試後端路線，否則無需與Vite一起運行php artisan serve 。
• 在JS中使用import / export語法 - Vite本身支持ES模塊。
• 不要忘記在生產部署中進行public/build/ （或在部署中構建）。

就是這樣！現在，您擁有使用Vite與Laravel集成的現代快速前端構建系統。它比WebPack快，具有即時HMR，並且縮放得更好。

基本上：安裝，配置入口點，使用@vite並運行npm run dev 。

以上是如何在Laravel項目中設置Vite？的詳細內容。更多資訊請關注PHP中文網其他相關文章！