Zenn
⚡

LaravelとViteでVue.jsのCSSが反映されない問題の解決手順

に公開
Docker
Laravel
Vue.js
Vite
tech

はじめに

LaravelでフロントエンドのビルドツールとしてViteを使用している際、Viteを起動してもCSSが反映されない問題に直面しました。
ブラウザのデベロッパーツールで確認してみると、以下のようなエラーが表示されていました。

GET http://[::1]:5173/resources/css/app.css net::ERR_EMPTY_RESPONSE
GET http://[::1]:5173/resources/js/app.js net::ERR_EMPTY_RESPONSE
GET http://[::1]:5173/@vite/client net::ERR_EMPTY_RESPONSE

このエラーの原因は、以下の2点でした。

  • Dockerの設定で、Viteが使用するポート5173がホスト（Docker外）に公開されていなかったこと

  • Viteが「Local」（localhost）は監視しているが、「Network」（ネットワーク越しのアクセス）は監視していないこと

環境

  • Laravel - 12.0
  • vite - 6.2.5
  • vue - 3.5.13

改善する手順

1. サーバのポート5173の設定を追加する

portsの部分を追記する

docker-compose.yml
services:
  workspace:
    build:
      context: .
      dockerfile: ./docker/php-fpm/Dockerfile
    volumes:
      - ${APP_CODE_PATH_HOST}:/var/www/html/
+   ports:
+     - "5173:5173"

docker/php-fpm/DockerfileにEXPOSEの設定を追加

Dockerfile
  FROM php:8.3-fpm
+ EXPOSE 5173

設定後にDockerコンテナを再起動する。

2. vite.config.jsに設定を追記する

まず、@vitejs/plugin-vueをインストールします。これにより、ViteでVue.jsをサポートできるようになります。

docker compose exec frontend npm install -D @vitejs/plugin-vue

  • エイリアスの設定
    Viteがvueを正しく認識するように、resolve.aliasにVueのエイリアスを追加します。これにより、vue/dist/vue.esm-bundler.jsを指定することで、Vueのバンドル版を使用できます。

  • プラグインの追加
    pluginsの設定に、先ほどインポートしたvue()を追加します。これにより、ViteはVue.jsのコンポーネントを適切に処理できるようになります。

  • 開発サーバーの設定
    serverセクションを追加することで、コード変更が即座にブラウザに反映される「ホットモジュールリプレースメント（HMR）」が有効になります。host: trueで他のデバイスからもアクセスでき、hmr.host: 'localhost'で正常に動作します。

vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import vue from '@vitejs/plugin-vue';

export default defineConfig({
+ resolve: {
+   alias: {
+     vue: 'vue/dist/vue.esm-bundler.js',
+   },
+ },
  plugins: [
+   vue(),
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
+ server: {
+   host: true,
+   hmr: {
+     host: 'localhost',
+   },
+ },
});

これで、コンソールのエラーが解消され、CSSも正しく読み込まれるはずです。

さいごに

今回は、LaravelとViteでVue.jsのCSSが反映されない問題を解決する手順を紹介しました。Dockerのポート設定とViteの設定を調整することで、開発環境が正常に動作するようになったため、この記事を作成しました。

参考

https://qiita.com/asaii-tone/items/88dcb4d40522dea415b0

Discussion