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

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

?1。檢查Laravel和PHP版本

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

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

?2。通過NPM安裝Vite

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

 NPM安裝

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

如果未安裝Vite（例如，在較舊的項目中），請?zhí)砑樱?/p>

 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中創(chuàng)建一個vite.config.js文件（如果尚未存在）：

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

導(dǎo)出默認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服務(wù)器
• 輸出正確的生產(chǎn)構(gòu)建路徑
• 自動處理熱模塊更換（HMR）

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

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

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

 “腳本”：{
    “ dev”：“ vite”，
    “構(gòu)建”：“ Vite Build”，
    “預(yù)覽”：“ Vite Preview”
}

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

 “腳本”：{
    “ dev”：“ vite”，
    “構(gòu)建”：“ Vite Build”，
    “服務(wù)”：“ Vite Preview”
}

?6。啟動開發(fā)服務(wù)器或構(gòu)建生產(chǎn)

在開發(fā)過程中：

 NPM運行開發(fā)

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

用於生產(chǎn)構(gòu)建：

 NPM運行構(gòu)建

這將資產(chǎn)彙編並將資產(chǎn)簡化為public/build/ 。

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

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

反應(yīng)示例

安裝React支持：

 NPM安裝React React-Dom

更新vite.config.js ：

導(dǎo)入從“@vitejs/plugin-react”中導(dǎo)入反應(yīng)；

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

然後使用.jsx文件並導(dǎo)入正常反應(yīng)。

vue示例

從'@vitejs/plugin-vue'導(dǎo)入vue;

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

?8。環(huán)境和URL處理

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

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

對於共享環(huán)境（例如代客或Docker），您可能需要設(shè)置host: '0.0.0.0'並調(diào)整hmr.host 。

最後筆記

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

就是這樣！現(xiàn)在，您擁有使用Vite與Laravel集成的現(xiàn)代快速前端構(gòu)建系統(tǒng)。它比WebPack快，具有即時HMR，並且縮放得更好。

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

以上是如何在Laravel項目中設(shè)置Vite？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！