Fossa Advent Calendar 2日目

Laravel ValetとViteの組み合わせ

使用環境

Name	Version
Node.js	v18.12.1
Vite	4.0.3
@vitejs/plugin-vue	4.0.0
PHP	8.1.13
cpriego/valet-linux	v2.2.37

Laravel + Viteの場合は、Laravel Viteがあるので、不便に感じませんでした。

VueやTailwind CSSなど、フロントエンドのみの環境で、Laravel Valet + Viteは不便に感じていました。

Viteのデフォルトだと、publicフォルダが、別の用途で使われるからです。

publicDir

publicフォルダの中身を、distフォルダにコピーするのが、目的なのかな？*1

public/icon.pngは、dist/icon.pngにコピーされるので、ソースコード内では、/icon.pngと書くのが正しいらしいです。*2

結論

publicフォルダを、copyフォルダに変更しました。

distフォルダを、publicフォルダに変更しました。

rootを、srcフォルダに変更しました。

ルートにあるindex.htmlをLaravel Valetが読まないように、src/index.htmlに移動しました。

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  root: path.resolve(__dirname, 'src'),
  plugins: [vue()],
  publicDir: path.resolve(__dirname, 'copy'),
  build: {
    outDir: path.resolve(__dirname, 'public'),
    emptyOutDir: true,
  },
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/assets/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Laravel Valet + Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

copy/assets/vite.svgから、public/assets/vite.svgにコピーされるので、ソースコードでは/assets/vite.svgです。

ローカルサーバー起動

Laravel Valetを使わない選択をした時に、便利だと思ったのは、ローカルサーバーを起動する方法です。

npm run devをすると、ローカルサーバーが起動します。

ターミナルで表示されたアドレスをクリックする必要がないように、自動的にブラウザで表示されるように設定しました。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
  }
});

*1:解釈は、間違っているかもしれません

*2:ドキュメントに、書いてある通りです

独学者Fossa

独学していることなど