Help us understand the problem. What is going on with this article?

Windows10+Laravel/Homesteadでvue.js(Laravel-MIX)の環境を作る

More than 1 year has passed since last update.

マジで苦労しました。残念なことに1ヵ月以上は時間を浪費しました。
しばらく放置していましたがVue.js/Nuxt.js meetup #2 に参加してモチベーション回復してなんとか解決。
できてしまえばどうってことない話ですが、誰かのお役に立てれば幸いです。

よくわかってなくて周りに聞ける人もいないとこうなるんだよ!って記事です。

Windows10 Homeの人向けです。

Laravelを準備

vagrantなのでこういう記事を参考にLaravelのプロジェクトを作成、とっても簡単。
この状態で既にVue.js(Laravel MIX)が準備されているらしい。

Vagrant環境でnpm installが失敗する件

作成したLaravelプロジェクトのディレクトリでnpm installとするだけでwebpackやらvue.jsが使えるようになりますよと言われたのですがnpm installでエラーになりまくりです。

解決方法の選択肢がいろいろあって悩まされたのですが、共有フォルダ内にあるnode_modulesフォルダにシンボリックリンクが張れない問題を回避する方法でやってみました。

http://jjtake.hatenablog.jp/entry/2017/10/22/004650

mount --bindを使って共有フォルダ外にnode_modulesフォルダをマウントしています。マウントの永続化はvagrantfileのプロビジョニングで起動時にコマンド実行。

これで無事npmインストールは完了しました。

ローカルサーバー(webpack-dev-server)ってなに?

これが本当によくわかりませんでした。
Webサーバーみたいなものが動いているんだろうけど、本当に動いているのかどうか確認することもできないし(ドキュメントルートがどこなのか知らない)そもそもアクセス方法もわからない。

ブラウザ開いてlocalhost:8080でOKとか言われても仮想マシン上で動いてるのにlocalhostでアクセスできないし。

  • どこに置いたソースが表示されているかわからない
  • ローカルサーバーの設定方法がわからない
  • アクセス方法がわからない
  • そもそもちゃんと起動しているのかわからない

vagrantだからダメなのか、Laravelがダメなのか、npmのインストールがダメなのか、webpackがだめなのか??

あれこれ考えましたが問題の切り分け方法もわからず進展のない日々が続いたのは辛かったです。
なんせ設定を変更して試そうにもどのファイルを変更したらいいのかという知識すら持ち合わせていなかったので、、

とりあえずこれで動いた

・仮想マシン上のローカルサーバーにはポート転送でアクセスする

vagrantの機能でポート転送することができます。

config.vm.network "forwarded_port", guest: 8080, host: 8080

vagrantfileに追記したら仮想マシンのローカルサーバーにアクセスできました。

・webpack-dev-serverの設定を変更する

ようやくわかったのですがwebpack.mix.jsでmixオブジェクトに設定してやるとデフォルトを上書きしてくれるみたいです。

webpack.mix.js
mix.webpackConfig({
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        port: 8080,
    },
    watchOptions: {
        poll: 2000,
        ignored: /node_modules/
    }
});

重要なのはwatchOptionsです、これを設定しておかないとソースの変更を検知してくれず自動的に更新してくれません。

おわりに

これで念願のvue.jsの開発に着手できるようになりました。
この方法が正しいのかどうかわかりませんしDockerとか使えたら状況は違っていたかも知れません。何はともあれvue.jsのサンプルコードとか試せるようになったので大満足です。

もうほぼほぼ諦めていたんです、かなりの時間を費やしながら解決できず凹んでましたし。

Vue.js/Nuxt.js meetup #2に参加してよかったです。みなさんVue.jsでわいわい楽しそうだったのでライフが回復しました!ありがとう~

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした