LaravelでViteを良い感じに使うプラグイン Laravel Vite Plugin のTIPS的な。
Laravel Vite Plugin で tsconfigPaths がうまく効かないケースがある
tsconfig.jsonのpathsで @/* に ./resources/js/* 以外（例えば ./resources/ts/* とか）を指定した状態で、vite-tsconfig-paths を使っても ./resources/js/* の方にaliasが効いてしまう（エディタ上ではtsconfig.jsonを見て補完や型が効いたりするがビルドで失敗する）。
理由としては vite-tsconfig-paths はモジュールパス解決（resolve）に対して変更するのだが、 laravel-vite-plugin がaliasを自動設定するため @ のresources/jsのエイリアスが先に効いてしまうため。
解消方法としては tsconfig.json と同じ設定を vite.config.js にいれる。
以下のような感じでtsconfig.jsonをパースしてaliasを自動設定することも可能だが、ちょっとtoo muchな感じもする…。
{
resolve: {
alias: Object.fromEntries(
Object.entries(tsconfig.compilerOptions.paths).map(([key, values]) => {
let value = values[0];
if (key.endsWith("/*")) {
key = key.slice(0, -2);
value = value.slice(0, -2);
}
const nodeModulesPrefix = "node_modules/";
if (value.startsWith(nodeModulesPrefix)) {
value = value.replace(nodeModulesPrefix, "");
} else {
value = path.join(__dirname, value);
}
return [key, value];
})
),
},
}
HTTPS対応
ローカル開発環境をHTTPSでホスティングしている場合、Viteのサーバーの方もHTTPS対応しないとMixed Contentでうまく動かない。
以下のような感じで秘密鍵や証明書を設定すればOK。
{
server: {
https: {
key: fs.readFileSync('/app/dev-key.pem'),
cert: fs.readFileSync('/app/dev.pem'),
},
},
}
HTTPSでホスティングする場合はホスト名でのアクセスになると思うので、その場合はViteにもホスト名を設定する必要がある。
{
server: {
host: true,
hmr: {
host: '{domain}'
},
cors: { origin: 'https://{domain}:{port}' },
},
},