Laravel

【Laravel9】npm run devをするとviteがデフォルトになってた

えび

最新のLaravel (ver.9)をインストールして、
npm run dev を走らせるといつもと違う表記が...

どうやら最新のLaravelではLaravel mixではなくviteが標準使用になったらしい

npm run dev したところ

  • 従来
                         
   Laravel Mix v6.0.43   
                         

✔ Compiled Successfully in 6387ms
  • 最新版
  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 596ms.


  Laravel v9.19.0

npm run dev をするとカーソルも戻ってこなくなったし、
public/jsやpublic/css以下にコンパイルファイルが生成されない...

viteに合わせて設定をしてみる

これまでのLaravel mixのコンパイル設定はwebpack.mix.jsに書いていたけど、
viteを使用するのでvite.config.jsの方に記載する必要がある

  • 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',
        ]),
    ],
});

上記がデフォルトなので、そのプロジェクトに応じて編集する

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

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

上記でnpm run buildを実行すると、public以下にファイルが生成される

✓ 2 modules transformed.
public/build/manifest.json               0.12 KiB
public/build/assets/app.fe12ec0d.js      0.19 KiB / gzip: 0.14 KiB
public/build/assets/style.795d64a5.css   14.49 KiB / gzip: 2.94 KiB

基本的にはnpm run devでLaravel mixでのnpm run watch と同様に変更を動的に拾って反映してくれる

ただ新しくファイルを追加したい場合や本番環境用にコンパイルする場合は
npm run buildを実行するみたい
この際にバージョニングでキャッシュ対策も併せて行なってくれる

コンパイルされたファイルを読み込む

@viteを使用する

<!-- 従来 -->
<link rel="stylesheet" href="{{ mix('css/style.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

<!-- vite仕様 -->
@vite(['resources/sass/style.scss', 'resources/js/app.js'])

@viteではコンパイル後のファイルを見にいくのではなく、
コンパイル元のファイルパスを指定するみたい

vueを使う

  • インストール
npm i @vitejs/plugin-vue --save-dev
  • vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue' // ⭐️ 追加

export default defineConfig({
  plugins: [
    laravel([
      'resources/sass/style.scss',
      'resources/js/app.js',
    ]),
    vue(), // ⭐️ 追加
  ],
  server: {
    host: true
  },
})

Laravel 公式ドキュメント

viteではなくLaravel mixに戻したい場合は こちら

\ 案件のご依頼・ご相談はこちらから /