この記事では、どのようにサブディレクトリからSolidJSアプリケーションを作成する方法を示します.例えば、Githubページに展開します.

コード

まず、the documentation以降のコードを生成します.

$ npx degit solidjs/templates/js solid-subfolder
npx: installed 1 in 0.785s
> cloned solidjs/templates#HEAD to solid-subfolder

問題

npm installでインストールし、npm run buildでビルドした後、サブディレクトリからアクセスすると出力が失敗します.だから、私の場合はhttp://localhost/github/solid-subfolder/dist/にアクセスしてみます.

ご覧のように、既定ではindex.htmlは、ドメインルートから資産をロードしようとします.例えば、http://localhost/assets/index.1b7ca044.jsを読み込みます.

フィックス

VITEはHTML側のベースインポートを制御します.the documentationに示されているように、デフォルト値は/です.vite.config.jsで変更できます.

 export default defineConfig({
   plugins: [solidPlugin()],
+  base: "./",
   build: {
     target: "esnext",
     polyfillDynamicImport: false,

この変更は、アプリケーションが期待通りに動作します.

リンク

ここでは、repo＆working appを見つけることができます

概要

この記事では、サブフォルダに展開するときにSolidJSアプリの作業を行う方法を見てきました.