はじめに

LaravelとVue.jsを利用してWebサイトを開発しようとしています。
エラーが出てにっちもさっちもいかなくなったので、質問します。

動作環境

MacにCentOSの仮想環境を構築し、その中にLaravelのアプリケーションを作成しています。

ホストマシン

macOS High Sierra 10.13.3
Oracle VirtualBox 5.1.26
vagrant 1.9.8

ゲストマシン

CentOS release6.9
PHP 7.1.15
Composer 1.6.3
Laravel Framework 5.6.12
nvm 0.33.8
node 9.8.0
npm 5.6.0

症状

こちらのサイトを参考に、似たようなサイトを作成しています。
https://qiita.com/acro5piano/items/f33381fc60408abe9865

bash
1php artisan serve --host 192.168.33.10:8000

このコマンドでWebサーバーを起動することはできます。192.168.33.10というのはゲストマシンのIPアドレスです。
ブラウザでこのIPにアクセスしてみたところ、以下のようなエラーが発生しました。

ErrorException (E_ERROR)
The Mix manifest does not exist. (View: /home/vagrant/●●●●/resources/views/app.blade.php)

●●●●というのは伏字です。
このエラーを解決したいです。

設定ファイル

package.jsonはこんな感じです。author等は省略しています。

json
1{
2  "scripts": {
3    "dev": "npm run development",
4    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
5    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6    "watch-poll": "npm run watch -- --watch-poll",
7    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
8    "prod": "npm run production",
9    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
10  },
11  "dependencies": {
12    "axios": "~0.18.0",
13    "bootstrap-sass": "~3.3.7",
14    "cross-env": "~5.1.4",
15    "jquery": "~3.3.1",
16    "laravel-mix": "~2.1.11",
17    "lodash": "~4.17.5",
18    "vue": "~2.5.16",
19    "vue-resource": "~1.5.0",
20    "vue-router": "~3.0.1",
21    "webpack": "~4.2.0"
22  },
23  "devDependencies": {
24    "webpack-cli": "~2.0.12"
25  }
26}

色々な情報を参考にして構築したので、内容がおかしいかもしれません。
npmやlaravelに慣れていないため、どこがおかしいのかもよくわかっておりません。

試したこと

mix manifest というのを生成するためには、npm run devを実行すれば良いという情報があり、実行してみたのですが、途中で止まってしまって、うまくいきません。

bash
1$ npm run dev
2> ●●●●@1.0.0 dev /home/vagrant/●●●●/●●●●
3> npm run development
4
5
6> ●●●●@1.0.0 development /home/vagrant/●●●●/●●●●
7> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
8
9 10% building modules 8/10 modules 2 active ...les/vue-router/dist/vue-router.esm.jsTypeError: dep.getResourceIdentifier is not a function
10    at addDependency (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:387:30)
11    at iterationOfArrayCallback (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:78:3)
12    at addDependenciesBlock (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:407:5)
13    at Compilation.processModuleDependencies (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:418:4)
14    at afterBuild (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:545:16)
15    at _this.buildModule.err (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:591:11)
16    at callback (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:342:35)
17    at module.build.error (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:378:12)
18    at handleParseResult (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:363:12)
19    at doBuild.err (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:385:6)
20    at runLoaders (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:264:12)
21    at /home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:370:3
22    at iterateNormalLoaders (/home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
23    at Array.<anonymous> (/home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
24    at Storage.finished (/home/vagrant/●●●●/●●●●/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
25    at provider (/home/vagrant/●●●●/●●●●/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
26    at /home/vagrant/●●●●/●●●●/node_modules/graceful-fs/graceful-fs.js:78:16
27    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3)

この最後の行で止まってしまい、いくら待ってもその先に行きません。
npm installもうまく行っていないようで、以下のような警告がでます。

bash
1$ npm install
2npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
3npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
4npm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
5npm WARN webpack-dev-server@2.11.2 requires a peer of webpack@^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
6
7up to date in 11.929s

ここに表示されているwebpack 3.1.0をインストールしても、npm run devはうまくいきませんでした。

どなたか解決できる方、いらっしゃいませんでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

新規プロジェクト作って最初からやり直したほうがいいです。
しなくていい余計なことをしている。

Vagrant使うならLaravel公式のHomestead
Vagrantで動かしてるならphp artisan serveも不要。

Laravel mixにwebpackは含まれてるので"webpack": "~4.2.0"は不要。
おそらく原因はこれでmixのwebpackは3なのに4を追加してるから。

投稿2018/03/22 05:24

kawax

総合スコア10377

segur

2018/03/22 06:15

Homesteadというのがあるんですね。情報ありがとうございます。試してみます。

segur

2018/03/22 12:34

教えていただいたHomesteadを利用したところ、解決しました。本当にありがとうございました。今後、この質問を見る人がいるかもしれませんので、やったことの詳細を書きます。まず、教えていただいた https://readouble.com/laravel/5.6/ja/homestead.html の手順通りにHomesteadの環境を構築しました。構築した仮想マシンの /home/vagrant/code にcomposer create-projectでlaravelのアプリを構築すると、確かにphp artisan serveなしでブラウザからアクセスできるようになりました。生成されたpackage.jsonに"vue-router":"^3.0.1"を追加して、npm installをしたところ、エラーなく無事にインストールできました。 vue componentを整理したところ、npm run watchが通るようになり、ブラウザからもvueで書いたページが正常に閲覧できるようになりました。不慣れで色々と手間取ってしまいましたが、無事にLaravel+Vue.jsの環境が構築できました。ご回答ありがとうございました。

行動規範の内容に同意します