質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.30%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

517閲覧

laravel+vue.js開発環境構築

hack871

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2024/01/11 14:26

編集2024/01/12 06:05

実現したいこと

Laravel + Inertia + Vue.jsでの開発環境構築を実現したい
laravelでの環境構築経験はあるが、Inertia+vue.jsを組み合わせた環境構築は初めてなので質問させていただきます。

現段階でのインストール状況:
npm,node.jsインストール済み
[package.jsonファイル]
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@inertiajs/vue3": "^0.6.0",
"@tailwindcss/forms": "^0.5.3",
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.12",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"vite": "^4.0.0",
"vue": "^3.2.41"
}
}
[composer.json]
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^8.0.2",
"guzzlehttp/guzzle": "^7.2",
"inertiajs/inertia-laravel": "^0.6.8",
"laravel/framework": "^9.19",
"laravel/sanctum": "^3.2",
"laravel/tinker": "^2.7",
"tightenco/ziggy": "^1.0"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/breeze": "^1.19",
"laravel/pint": "^1.0",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^6.1",
"phpunit/phpunit": "^9.5.10",
"spatie/laravel-ignition": "^1.0"
},
"autoload": {
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"@php -r "file_exists('.env') || copy('.env.example', '.env');""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true,
"allow-plugins": {
"pestphp/pest-plugin": true
}
},
"minimum-stability": "stable",
"prefer-stable": true
}

発生している問題・分からないこと

1.ブラウザにwelcome.vueファイルを表示させようとしたところ何も映らず、検証ツールのコンソールで"Failed to load resource: net::ERR_CONNECTION_REFUSED"というエラーが出てしまう.(run dev,run build実行済み)

2.Unable to locate file in Vite manifest: unable to locate file in vite manifest: resources/js/pages/auth/login.vue.
2のエラーに関してはvite.config.jsのlugins: [
laravel({
input: 'resources/js/app.js',[ここ]
[ここ]の部分に表示させたいページのパスを挿入すれば2のエラーはなくなるのですが、この措置は正しいのかはわかりません.
質問:これらのエラーの原因と解決方法に関して少しでもわかる方がいましたら教えていただきたいです.

該当のソースコード

特になし

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

[参考にした記事]
Laravel + Inertia + Vue.js 環境構築にあたり
下記の記事の[Laravel環境の構築]のみを参考して各々をインストールした[https://zenn.dev/takuo/articles/8a6829ba020ad0]

unable to locate file in vite manifest: resources/js/pages/auth/login.vue.というエラーを解決するにあたり下記の記事を参考にしたがうまくいかなかった.

[https://qiita.com/zakki_engineer/items/170ac2386c23b9d78c4b]

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

inertiaなら表示するのはresources/js/Pages/Welcome.vueなので
welcome.blade.phpは全く関係ない。

何をやったのかを省略してるから誰も回答できない質問になっている。

投稿2024/01/12 03:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hack871

2024/01/12 06:10

ご指摘ありがとうございます。 「何をやったのかを省略してるから誰も回答できない質問になっている」 →試したことに関して「上記の詳細・結果」の部分で説明をしたつもりなのですがもう少し詳細に文章で伝えるべきということでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問