常連

### 実現したいこと
EC2(Linux 2023)のApache へ Laravel Breeze の画面をそのまま表示したいです。

### 実施手順
0. /var/www/ で create-project する。（composer create-project laravel/laravel laravel-test）
0. /var/www/html に 1. の laravel-test/public のシンボリックリンクを置く。(ln -s /var/www/laravel-test/public laravel-test)
0. 作成したプロジェクトに breeze をインストールする
0. フロント側をコンパイルする (npm run build)
0. Chrome で開くと 404エラー(～/build/dist/assets/Welcome.css　net::ERR_ABORTED 404 (Not Found))

### 参考にしたサイト
https://utsu-programmer.com/environment/laravel-setting-public/

Laravel Breeze をEC2(Apache) へデプロイしたい。（EC2）

Node.jsのコンソールアプリでviteを使用して静的ファイルをコピーしたいですがうまくいかなくて困っています。

vite.config.jsのvite-plugin-static-copyの部分をコメントアウトしていて、 npm run buildを実行すると正しくビルドするのですが、
resourcesフォルダをコピーしたく、vite-plugin-static-copyを使用するとimportでエラーします。

```console
X [ERROR] "vite-plugin-static-copy" resolved to an ESM file. ESM file cannot be loaded by `require`
```

Node.jsのVersionは20を使用しています。
tsconfig.jsのmoduleは　"module": "commonjs" を指定しています。
今回はコンソールアプリでdependenciesをあえて使わないようにしているため、devDependenciesのみとなっており、node_modulesnのコピーは不要としています。

わかるかたいらっしゃいましたらお願いします。

```vite.config.js
import { defineConfig, normalizePath } from 'vite'
import path from 'node:path'
// 読み込めない
// import { viteStaticCopy } from 'vite-plugin-static-copy'

// https://vitejs.dev/config/
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/typedef
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  return {
    build: {
      assetsDir: '',
      outDir: normalizePath(path.resolve(__dirname, 'dist')),
      sourcemap: 'inline',
      copyPublicDir: true,
      emptyOutDir: true,
      minify: false,
      reportCompressedSize: false,
      rollupOptions: {
        input: normalizePath(path.resolve(__dirname, 'src/index.ts')),
        output: {
          entryFileNames: '[name].js'
        }
      }
    },
    plugins: [
      /*
      viteStaticCopy({
        targets: [
          {
            src: 'src/resources',
            dest: 'dist'
          }
        ]
      })
      */
    ]
  }
})
```

```package.json
{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "nodemon ./src/index.ts",
    "build": "vite build",
    "start": "node ./dist/index.js",
    "lint": "eslint src/**/*"
  },
  "devDependencies": {
    "@types/node": "^20.12.8",
    "@typescript-eslint/eslint-plugin": "^7.7.0",
    "@typescript-eslint/parser": "^7.7.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "nodemon": "^3.1.0",
    "prettier": "^3.2.5",
    "ts-node": "^10.9.1",
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.9.5",
    "vite": "^5.2.11",
    "vite-plugin-static-copy": "^1.0.4"
  }
}


Node.jsのコンソールアプリでviteを使用して静的ファイルをコピーしたい

### 実現したいこと

- [ ] API サーバーへ GET リクエストを送り、結果を ブラウザのコンソールに表示したい

### 前提

Ruby on Rails で 作成した API に
Vue3 から GET リクエストを送信して、
結果をブラウザのコンソールに表示したいです。

### 発生している問題・エラーメッセージ

ブラウザのコンソールに以下が表示されています。
~~Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON~~

```
GET http://localhost:5173/posts/1 500 (Internal Server Error)
```

`vite.config.ts` の proxy 設定に誤りがあるような気がするのですが、問題を特定できていません。

### 該当のソースコード

**src/App.vue**

```typescript
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
import { ref } from 'vue'

const data = ref(null);
fetch("http://localhost:5173/posts/1")
.then(response => response.json())
.then(json => console.log(json))

</script>
```

**vite.config.ts**

```typescript
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: { // CORS 対策
      '/posts/1': 'http://localhost/3000',
    }
  }
})
```

### 試したこと

**curl での動作確認結果**
```bash
curl localhost:3000/posts/1
{"id":1,"body":"ABC","created_at":"2023-10-29T12:24:31.739Z","updated_at":"2023-10-29T12:24:31.739Z"}
```

### 解決方法

サーバサイドの Rails アプリケーションに、CORSの設定が不足していました。
不足していた設定を追加することで解決しました。

```ruby
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin Ajax requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 以下に、 http://localhost:5173 が不足していたため、追加したところ
解決 しました
    origins "http://localhost:3000", "http://localhost:5173"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

```

### 補足情報（FW/ツールのバージョンなど）

**package.json**
```json
{
  "name": "keputonea",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "typescript": "~5.2.0",
    "vite": "^4.4.11",
    "vue-tsc": "^1.8.19"
  }
}
```

CORS 対策をしつつ、Vue3 から Rails API を呼び出したい

### 実現したいこと
SCSSで指定した背景画像を開発環境（http://localhost/）で表示したい。

### 発生している問題・分からないこと
DockerにてLaravel10（vite）環境を構築しています。
SCSSで指定したbackground-imageが表示されず。。
はじめてvite環境を触るのでご知見お借りしたいです。

■事象
SCSSでbackground-imageにpublic/img配下に設置した画像を指定しました。
```/resources/scss/common.scss
.icn-selectbox {
    background-image: url(/img/arrow-selectbox.svg);
}
```
ブラウザで確認したところ、指定した画像のパスが「http://localhost:5173/img/arrow-selectbox.svg」となっていました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-21/80aa121e-eb18-4a5a-833c-85e1c0f8a35d.png)
http://localhost:5173を参照するのではなくhttp://localhostを参照するように何かしらしなければならないのか、もしくはhttp://localhost:5173を参照していること自体はあっているのかがわからず、対応方法が不明です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-21/d16d0692-8060-4394-91dc-713bfb70c8b0.png)

調べるとvite.config.jsのserverのオプションでhostという記載を多く見かけたのですが、解決できませんでした。

ご教示いただけますと幸いです。
不足している情報等ございましたらお申し付けください。
よろしくお願いいたします。



### 該当のソースコード

```SCSS
.selectbox { background-image: url(/img/arrow-selectbox.svg);}
```

```vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
    },
});

```

```docker-compose.yml
services:
  app:
    container_name: app
    build: ./docker/php
    volumes:
      - .:/var/www
    ports:
      - 5173:5173
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
    volumes:
      - .:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /var/www
    depends_on:
      - app
  db:
    platform: linux/x86_64
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: db-user
      MYSQL_PASSWORD: db-pass
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
    links:
      - db
    ports:
      - 8081:80
    volumes:
      - /sessions
volumes:
  mysql-data:
```

```開発環境
docker-compose.yml
app
└ public
　└ img
　　└ arrow-selectbox.svg
└ resources
　└ scss
　　└ common.scss
└ vite.config.js
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
- 画像の指定を相対パスに変更→ルートは変わらないので意味なしでした
- viteの設定ファイルのserverにオプションを追加→変わらずでした

### 補足
[docker環境]
・nginx
・mysql

※docker-compose.ymlの内容も記載いたします。

【Docker環境+Laravel10+vite】SCSSで指定した画像が表示されない

### 実現したいこと


- [ ] matter.jsの`collisionStart`などの衝突イベント内で、自前の配列に`Array.findIndex`で検索したインデックスの次の要素を取得したい

### 前提


TypeScript, SolidStart, Matter.jsでスイカゲームを作っています。
同じフルーツが衝突して次のフルーツに進化する機能を実装中に以下の問題が発生しました。

### 発生している問題
進化順は本家?switch版と同じです。

進化前と進化後のフルーツ名をコンソールに出力するようにしているのですが、時折意図しないものが生成されてしまっています。
うまくいく時もあるので不安定な感じです。
```
//理想
old: orange
new: kaki

//問題
old: orange
new: orange

//問題2
old: kaki
new: orange
```

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-22/b38cfe04-ea91-4953-8d49-15c35e7edd91.png)

レンダリングでは衝突後に消えて新しいフルーツが生成されるまでは正常に動作しています。
生成するフルーツの種類を`Array.findIndex`で検索し、1を足して再度配列を参照するところでつまずいているみたいです。
### 該当のソースコード
実際はファイルを分けて`export`しています。

* データ定義
```TypeScript
type FruitData = {
        name: string
        point: number
        radius: number
        imageURL: string
    }

// データ自動生成
const boxWidth = 300
const maxRadius = boxWidth * (2 / 7)
const fruitRadius = (num: number) => maxRadius / (1.2 ** num)

// 定義
const fruitList: FruitData[] = [
    {
        name: 'cherry',
        point: 1,
        radius: fruitRadius(10),
        imageURL: ''
    },
//... 中略
 {
        name: 'watermelon',
        point: 66,
        radius: maxRadius,
        imageURL: ''
    }
]
```

* 処理
```TypeScript
/* 前略 */

// 進化後のフルーツの情報を取得
const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`) // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}

// フルーツのbodyを生成するための関数
type FruitObject = (data: FruitData, x: number, y: number) => Matter.Body
const fruitObject: FruitObject = (data, x, y) => Bodies.circle(x, y, data.radius, {
    label: data.name
})

/* 中略 */

Events.on(engine, 'collisionStart', e => {
            e.pairs.forEach(pair => {
                if (pair.bodyA.label === pair.bodyB.label) {
                    // 間の座標を算出
                    const halfXY = () => {
                        const halfGapX = (pair.bodyA.position.x - pair.bodyB.position.x) / 2
                        const halfGapY = (pair.bodyA.position.y - pair.bodyB.position.y) / 2
                        return {x: pair.bodyA.position.x + halfGapX, y: pair.bodyB.position.y + halfGapY}
                    }
                    const newPos = halfXY()

                    // 衝突した２つを削除
                    Composite.remove(fruitsComposite, pair.bodyA)
                    Composite.remove(fruitsComposite, pair.bodyB)

                    // 上で定義した関数で新しいフルーツの情報を取得
                    const data = newFruitData(fruitList, pair.bodyA.label)
                    if (!data) return
                    console.log(data)

                    // 追加
                    const newFruit = fruitObject(data, newPos.x, newPos.y)

                    Composite.add(fruitsComposite, newFruit)
                }
            })
        })
```

### 試したこと

vitestで関数を抽出してテストしたところ何回試しても一貫して正常でした。
```TypeScript
const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`)  // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}


test.only('config', () => {
    // ランダムにフルーツの名前を生成
    const randomName = fruitList[Math.trunc(Math.random() * fruitList.length)].name

    const data = newFruitData(fruitList, randomName)
    if (!data) return
    console.log(data)
})
```
* 例
```
old: orange
new: kaki
{ name: 'kaki', point: 15, radius: 28.705540858318642, imageURL: '' }
```

### 補足情報（FW/ツールのバージョンなど）

`Node.js v18.16.0`
`"solid-js": "^1.7.12"`
`"vite": "^4.4.9"`
`"solid-start": "^0.3.6"`
`"vitest": "^0.26.3"`
`"matter-js": "^0.19.0"`


matter.jsの衝突イベント発火時に自前の配列の検索と抽出が正しく完了できない

### 実現したいこと

Electron Forge + Vite でメインウィンドウ以外のHTMLで.mtsスクリプトを読み込みたい。

### 前提

https://www.electronforge.io/
を参考に、
```command
npm init electron-app@latest my-app -- --template=vite-typescript
```
を実行してテンプレートを作成しました。
その上で、既存の手動でビルドしていたtypescriptのコードをElectrom Forgeに移行しようとしているのですが、エントリーポイントのHTMLからtsを読み込んでくれるのですが、他のウィンドウのHTMLからtsを読み込んでくれません。
Inspectorを見るとトランスパイルさえしてくれていなくて、jsファイルも吐き出されていないようです。
```render側のエラー
Failed to load resource: net::ERR_FILE_NOT_FOUND
```

```src以下のディレクトリ
.
├── @types
│   ├── preload.d.ts
│   └── types.d.ts
├── main_process
│   ├── main.mts
│   └── window_handler.mts
├── preload_script
│   └── preload.ts
├── public
│   └── assets
│       ├── NoFileChosen.png
│       └── NoImage.001.png
├── renderer_process
│   ├── common_modules.mts
│   ├── index.mts
│   └── insert_vehicleAttributes.mts
└── types.d.ts
index.htmlはルートディレクトリ直下にあります。
insert_vehicleAttributes.htmlはルートディレクトリ直下のhtml/insert_vehicleAttributes.htmlです。
```
insert_vehicleAttributes.htmlから./src/renderer_process/insert_vehicleAttributes.mtsをトランスパイルされたものを読み込みたいです。
### 発生している問題・エラーメッセージ

mainプロセスのログを見てみるとこのような文言がありました。
```
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
```
RollupOptionsまたはHTMLからauto_determineエントリーポイントできませんでした。
そして、明確なoptimizeDeps.includeパターンが存在しません。
依存関係プレビルディングをスキップしました。

### 該当のソースコード

```HTML
絶対パスで指定しています。
<script type="module" src="/Users/User Name/Documents/drive-me-20231202/drive-me/src/renderer_process/insert_vehicleAttributes"></script>
```
```vite.renderer.config.ts
import { defineConfig } from 'vite';
import path from "path";

// https://vitejs.dev/config
export default defineConfig({
    build: {
        outDir: ".vite/build",
        emptyOutDir: true,
        rollupOptions: {
            input: {
                insert_vehicleAttributes: path.resolve(__dirname, "src/renderer_process/insert_vehicleAttributes.mts"),
            }
        }
    },
    resolve: {
        alias: {
            "@renderer": path.resolve(__dirname, "src/renderer_process"),
        }
    }
});
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-06/6e60956d-05eb-45ac-ad9c-e37a7ef2ba7c.png)

### 試したこと

build.rollupOptions.inputに項目を追加してみました。
エントリーポイントのHTMLでは絶対パスでトランスパイルされたtsを読めていたので、他のHTMLも絶対パスで指定してみました。
npm startでビルド・実行しています。

### 補足情報（FW/ツールのバージョンなど）
MacOS: 14.1.2 (23B92)

```package.json
{
  "name": "drive-me",
  "productName": "drive-me",
  "version": "0.1.0",
  "description": "The \"drive-me\" is a comprehensive tool designed to efficiently manage the operational status and attributes of rental cars. This app provides an intuitive platform for monitoring and organizing vital information related to the fleet of vehicles.",
  "main": ".vite/build/main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  },
  "keywords": [],
  "author": "User Name",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-deb": "^7.2.0",
    "@electron-forge/maker-rpm": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
    "@electron-forge/plugin-vite": "^7.2.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "electron": "27.1.3",
    "eslint": "^8.0.1",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.25.0",
    "ts-node": "^10.0.0",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "dotenv": "^16.3.1",
    "electron-squirrel-startup": "^1.0.0"
  }
}

VSCode:
Version: 1.84.2 (Universal)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:33.687Z (3 wks ago)
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.1.0
```


Electron Forge + ViteでエントリーポイントのHTML以外のHTMLでスクリプトを読み込みたいです。

# viteを用いたwordpressテーマ開発についての質問

## 質問概要
dockerを用いてwordpressのテーマ開発をしています。
以前までは、gulp,webpackを用いてpug,sass,jsをコンパイルしてbrowser-syncでリロードするというような開発を行っていました。
今回、viteに移行して開発を行おうとしたところ、思うように行かなかったため回答をいただきたく質問させていただきます。

無理矢理ではありますが、プロジェクトディレクトリにdocker環境とviteの環境を共存させています。pugでコンパイルしてwpテーマディレクトリ配下にphpファイルを作成、更新することができたのですが、phpの更新を監視してリロードする処理が上手く実装できませんでした。間違いがあれば修正していただきたいです。

## ディレクトリ構造
![ディレクトリ構造](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-07/73df1bcb-6212-405c-a9df-eaf2d59d3c50.png)

## vite.config.js
```javascript
import { defineConfig } from 'vite';
import pug from 'pug';
import pugPhpFilter from 'pug-php-filter';
import fs from 'fs';
import liveReload from 'vite-plugin-live-reload';
import path from 'path';
import dotenv from 'dotenv';
dotenv.config({ path: path.resolve(__dirname, '.env') });

const proxyPath = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : '';
const dist = './dist/wp-content/themes/' + process.env.WP_THEME;

export default defineConfig({
  root: path.resolve(__dirname, './'),
  plugins: [
    {
      name: 'pugPhp',
      // 開発サーバー時のみ
      apply: "serve",
      handleHotUpdate({ file, server }) {
        if ( file.endsWith('.pug') ) {
          console.log(`Pug file updated: ${file}`);
          const compiled = pug.compileFile(file, {
            pretty: true,
            filters: {
              php: pugPhpFilter
            }
          });
          const output = compiled();
          const srcPath = path.relative(path.resolve(__dirname, './src/pug'), file);
          const phpFilePath = path.resolve(__dirname, dist, srcPath).replace(/\.pug$/, '.php');
          fs.writeFileSync(phpFilePath, output);
        }
      }
    },
    {
      name: 'phpUpdated',
      handleHotUpdate({ file, server }) {
        if ( file.endsWith('.php') ) {
          console.log(`PHP file updated: ${file}`);
        }
      }
    },
    liveReload(dist+'/**/*.php'),
  ],
  server: {
    proxy: {
      '/': proxyPath,
    },
    port: 3000,
    host: true,
    hmr: {
      host: 'localhost'
    },
  },
  build: {
    outDir: path.resolve(__dirname, dist),
  },
});
```

dockerで構築したwordpressはlocalhost:8000、viteではプロキシにwordpressを立ち上げているホストを指定し、localhost:3000で立ち上げています。
回答のほどよろしくお願いいたします。


Viteを用いたWordpress開発


クリーンインストールから以下の設定でビルドしてみたところ http://localhost にアクセスしても表示されません
デベロッパーツールで確認すると
Cannot read properties of undefined (reading 'baseURL')
となっています

この状況で再度 yarn run dev すると http://localhost:3000 も表示されなくなり
Cannot read properties of undefined (reading 'baseURL')
となっています
.nuxt フォルダを消して yarn run dev するとまた表示されるようになります

どのようにbaseURLを設定したら正しくビルドできるようになるでしょうか？


### 該当のソースコード

```ここに言語を入力
npx nuxi@latest init test
```
・yarn を選択
・git repository no を選択
　
　
```ここに言語を入力
cd test
```
　
【nuxt.conig.ts を編集】
```ここに言語を入力
export default defineNuxtConfig({
    ssr: false,
    runtimeConfig: {
        app: {
            baseURL: '/',
        },
    },
    vite: {
        build: {
            rollupOptions: {
                output: {
                    entryFileNames: '[name].js',
                    chunkFileNames: '[name].js',
                    assetFileNames: '[name].[ext]',
                },
            },
        },
    },
});
```
　
```ここに言語を入力
yarn run dev
```
http://localhost:3000 表示される
　
　
```ここに言語を入力
yarn run build
```
　
```ここに言語を入力
cd .nuxt\dist\client\
```
　
【index.html 作成】
```ここに言語を入力
<html>
    <head>
        <script type="module" src="/entry.js"></script>
        <link rel="stylesheet" href="/entry.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
```
　
```ここに言語を入力
php -S localhost:80
```
http://localhost 表示されない
　
　

### 試したこと

config の色々な個所に baseURL: '/' を記載しましたが反映されませんでした

### 補足情報（FW/ツールのバージョンなど）
package.json
```ここに言語を入力
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.2",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5"
  }
}
```
　
node v18.16.0
