今回の事象
Laravel10のプロジェクトにVueを導入。
認証機能もVueを利用したものを導入して動作している。
Vueファイルを作成し、Laravelのbladeに組み込もうとしたが、テンプレートが展開されない。
解決方法
vite.config.jsに以下を追記
import vue from '@vitejs/plugin-vue';
export default defineConfig(({ mode }) => {
// 現在のモードに基づいて環境変数をロード
const env = loadEnv(mode, process.cwd(), 'VITE_');
return {
<<<------省略------>>>
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
},
},
<<<------省略------>>>
};
});
理由
Laravel10ではデフォルトではランタイムバージョンが参照されるため、テンプレート機能が動作しない。
テンプレートのコンパイルがサポートされている、ESモジュールバージョンをエイリアスに登録してテンプレートを利用できるようにする。
あとがき
全然気づかずに、過去のプロジェクトを参照して解決しました。こんなところが原因だと思わず3時間以上かかりました。。。。
導入の仕方にもよると思いますが、結構な罠だと思います。