將原始資產(chǎn)存儲在資源/目錄（CSS，JS，圖像，字體）中。 2。使用Laravel Mix（通過WebPack.mix.js）將資產(chǎn)編譯到公共/文件夾中，利用.js（），.sass（），.sass（）和.version（）和.version（）進行處理和緩存破壞。 3.運行NPM運行開發(fā)，NPM運行生產(chǎn)用於較小的生產(chǎn)資產(chǎn)，或者在開發(fā)過程中自動重新編譯的NPM運行觀察。 4。使用Mix（）助手（例如{Mix（'css/app.css'）}}）在刀片模板中包含編譯的資產(chǎn)，以確保生產(chǎn)中的適當資產(chǎn)版本。 5。通過在CSS中引用圖像和字體來處理圖像和字體（自動複製）或通過Mix.copy（）手動複製。 6.通過正確設(shè)置APP_ENV並依靠Mix（）加載適當?shù)馁Y產(chǎn)來確保特定於環(huán)境的處理。 7。對於Laravel 9，可以使用Vite而不是混合物 - 通過vite.config.js配置並與@Vite指令集成。管理資產(chǎn)有效地涉及組織源文件，通過混合或VITE進行編譯，並將其安全地包括在具有適當版本和環(huán)境支持的視圖中。

Laravel中的資產(chǎn)（例如CSS，JavaScript，圖像和字體）通常使用Laravel Mix進行，這簡化了使用WebPack（例如WebPack）的現(xiàn)代前端工具。這是在Laravel項目中有效管理資產(chǎn)的方法。

1。了解資產(chǎn)結(jié)構(gòu)

默認情況下，Laravel在resources/目錄中組織前端資產(chǎn)：

• resources/css/ - 用於樣式表（例如， app.css ）
• resources/js/ - 用於JavaScript文件（例如， app.js ）
• resources/images/ - 用於圖像（可選，不需要）
• public/ - 彙編和公開訪問的資產(chǎn)轉(zhuǎn)到此處（例如， css/app.css ， js/app.js ）

您絕對不應(yīng)在源資產(chǎn)中直接在public/文件夾中編輯文件 - 這是編譯輸出所在的地方。

2。使用Laravel Mix來編譯資產(chǎn)

Laravel Mix提供了使用簡單的JavaScript配置文件來定義WebPack構(gòu)建步驟的流利API：您的項目root中的webpack.mix.js 。

示例webpack.mix.js ：

 const mix = require（'laravel-mix'）;

mix.js（'Resources/js/app.js'，'public/js'）
   。
   。版本（）; //添加阻礙緩存哈希

這：

• 將app.js彙編為public/js/app.js
• 將SCS/SASS文件編譯到public/css/app.css
• .version()附加獨特的哈希（HASHES

3。編譯資產(chǎn)

在您的終端中運行這些命令：

• npm run dev - 編譯資產(chǎn)開發(fā)（無臨實）
• npm run production - 編譯和縮小生產(chǎn)
• npm run watch - 觀看文件並重新編譯更改（在開發(fā)過程中很棒）

確保首先運行npm install以安裝依賴性，例如laravel-mix ， sass ， postcss ，等。

4。包括刀片模板中的資產(chǎn)

編譯後，將生成的資產(chǎn)包括在您的刀片文件中（ resources/views/layouts/app.blade.php等）：

 <！ -  CSS->
<link href =“ {{mix（&#39;css/app.css&#39;）}}” rel =“ stylesheet”>

<！ -  JavaScript->
<script src =“ {{mix（&#39;js/app.js&#39;）}}}”> </script>

使用mix()助手確保在生產(chǎn)中正確加載版本的文件。

5。處理圖像和字體

將圖像和字體放在resources/images/或resources/fonts/中，然後在CSS中引用它們，或通過混音複製它們。

選項1：CSS中的參考

。背景 {
    背景圖像：URL（'../ images/bg.jpg'）;
}

引用時，Mix會自動將圖像複製到public/images 。

選項2：手動複製資產(chǎn)

在webpack.mix.js中使用Mix's copy()方法：

 mix.copy（“資源/圖像”，“公共/圖像”）;

6。特定環(huán)境資產(chǎn)處理

• 在本地開發(fā)中，您需要未啟示的資產(chǎn)和源地圖。
• 在生產(chǎn)中，使用npm run production來縮小和版本資產(chǎn)。

確保正確設(shè)置.env ：

 app_env =在開發(fā)過程中本地＃
app_env =生產(chǎn)

並在刀片中使用mix() - 它會自動檢測是否加載版本的文件。

7。高級：使用Vite代替混合（Laravel 9）

較新的Laravel版本支持Vite作為混合的替代方法。如果您的項目使用VITE：

• 配置在vite.config.js中
• 在Blade中使用@vite('resources/js/app.js')
• 運行npm run dev （Vite Dev Server）和npm run build

檢查您的package.json ，以查看您是使用混合還是VITE。

概括

• 將原始資產(chǎn)存儲在resources/
• 使用Laravel Mix（或Vite）將其編譯為public/
• 根據(jù)需要運行npm run dev ， watch或production
• 在刀片模板中使用mix()或@vite
• 生產(chǎn)中的版本資產(chǎn)以避免緩存問題

基本上，Laravel可以為您提供工具 - 只需組織您的資產(chǎn)，正確編譯它們，然後在您的視圖中安全地引用它們。

以上是如何管理Laravel的資產(chǎn)？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！