設(shè)置基礎(chǔ)：process.env.cdn_url || '/'在vite.config.js中以CDN域前綴資產(chǎn)URL； 2。運(yùn)行NPM運(yùn)行構(gòu)建以生成版本的資產(chǎn)； 3。使用AWS CLI或通過CI/CD自動化的工具將公共/構(gòu)建目錄同步到您的CDN； 4。在刀片模板中使用@Vite自動生成正確的CDN資產(chǎn)URL； 5。確保在CDN上進(jìn)行適當(dāng)?shù)木彺嫣幚?，因?yàn)閂ite的指紋可以長期緩存。這種配置使Laravel Vite能夠通過控制基本路徑和自動化資產(chǎn)同步，通過CDN有效地提供資產(chǎn)，從而通過全球分佈式交付來改善前端性能。

使用帶有Laravel和Vite的內(nèi)容交付網(wǎng)絡(luò)（CDN）是通過從地理上分佈的服務(wù)器提供資產(chǎn)（例如JavaScript，CSS，圖像）來改善前端性能的好方法。但是， Laravel Vite主要是為部署期間本地開發(fā)和建築資產(chǎn)而設(shè)計(jì)的，因此使用CDN需要一些額外的配置。

這是使其有效工作的方法：

?了解限制：vite≠cdn

在Laravel（通過laravel/vite-plugin ）中的Vite手柄：

• 開發(fā)服務(wù)器（HMR）
• 建築和版本管理資產(chǎn)
• 在刀片模板中註入正確的資產(chǎn)路徑

但是Vite不本質(zhì)地支持將資產(chǎn)上傳到CDN 。您需要手動配置構(gòu)建過程和資產(chǎn)URL，以指向CDN。

？步驟1：配置Vite以使用CDN URL

您需要告訴VITE將資產(chǎn)URL帶有您的CDN域。

在vite.config.js中，使用build.assetInlineLimit和base選項(xiàng)：

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

導(dǎo)出默認(rèn)decteConfig（{
    插件：[
        laravel（{
            輸入：['resources/css/app.css'，'resources/js/app.js']，
            刷新：是的，
        }），
    ]，，
    基礎(chǔ)：process.env.cdn_url || '/'，//例如，'https://cdn.yoursite.com/'
    建造： {
        OUTDIR：“公共/建築”，
        Assetsdir：''，
        清單：是的，
    }，，
}）;

現(xiàn)在，在您的.env文件中設(shè)置CDN_URL ：

 cdn_url = https：//cdn.yoursite.com/

??這僅影響Vite生成的資產(chǎn)路徑。 @vite之類的刀片指令將使用此基本URL。

？ ）步驟2：與您的CDN同步資產(chǎn)

運(yùn)行npm run build後，您需要將public/build （或outDir ）的內(nèi)容上傳到CDN。

常見工具：

• AWS S3 Cloudfront
• Cloudflare R2
• Digitalocean空間
• bunny.net

示例：使用AWS CLI上傳到S3

 NPM運(yùn)行構(gòu)建

AWS S3 Sync public/build S3：//您的cdn-bucket/build -ACL公共閱讀

或使用s3-sync-cli之類的軟件包或編寫部署腳本。

您可以在CI/CD（GitHub Action等）中自動化此功能。

？步驟3：更新刀片中的資產(chǎn)加載

Laravel的@vite指令現(xiàn)在將從您的CDN_URL開始生成URL，這要?dú)w功於base配置。

但是，請確保您不是硬編碼路徑。使用：

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

這將輸出：

 <link rel =“ stylesheet” href =“ https://cdn.yoursite.com/build/assets/app-xxxxx.css”>
<script type =“ module” src =“ https://cdn.yoursite.com/build/assets/app-xxxxx x.js”> </script>

?完美 - 資產(chǎn)是從CDN加載的。

？步驟4：處理緩存破壞和指紋

Vite在生產(chǎn)構(gòu)建中會自動指紋文件名（例如， app.abc123.css ），這非常適合CDN Caching。

只要確保：

• 您的CDN尊重緩存標(biāo)題
• 您僅在需要時(shí)才使緩存無效
• 您不會在沒有指紋的情況下設(shè)置過長的TTL

無需額外的工作 - Vite可以處理此操作。

？可選：將CDN用於開發(fā)服務(wù)器（不建議）

您通常不想通過CDN提供開發(fā)資產(chǎn)。將CDN_URL保持在本地env中，以便base落後於/ 。

 ＃.env.local
cdn_url =

保持快速和本地發(fā)展。

?摘要：關(guān)鍵步驟

• ?設(shè)置base: process.env.CDN_URL || '/' in vite.config.js
• ?使用npm run build構(gòu)建資產(chǎn)
• ?上傳public/build到您的CDN（S3，R2等）
• ?在刀片中使用@vite - 它將生成正確的CDN URL
• ?在部署管道中自動上傳

？專家提示：如果需要對資產(chǎn)URL的更多控制，請使用諸如vite-plugin-asset-path或自定義匯總插件之類的工具。

它不是自動的，但是有了一些配置更改和同步腳本，Laravel Vite與CDN效果很好。鑰匙是控制base路徑並同步構(gòu)建輸出。

基本上： Vite構(gòu)建→您上傳→Vite注入CDN URL 。

以上是如何使用Laravel Vite使用內(nèi)容輸送網(wǎng)絡(luò)（CDN）？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！