Vue CLI 4+Vagrant HMR有効化


HMRを有効にする設定。

Vagranfile
Vagrant.configure("2") do |config|
  config.vm.box = "generic/ubuntu1804"
  config.vm.provision "shell", inline: <<-SHELL
    apt-get -y update
    echo "set grub-pc/install_devices /dev/sda" | debconf-communicate
    apt-get -y dist-upgrade
    apt-get -y autoremove
    apt-get install -y nodejs npm
    npm install n -g
    n stable
    cd /home/vagrant/app
    npm install
    npm rebuild node-sass
  SHELL
  config.vm.synced_folder "./", "/home/vagrant/app", SharedFoldersEnableSymlinksCreate: true
  config.vm.network "forwarded_port", guest: 8080, host: 8080
end

プライベートIPにwebsocketをはろうとするので、ループバックアドレスに修正。

vue.config.js
module.exports = {
    devServer: {
        public: '127.0.0.1:8080',
    }
}

Vagrantの共有フォルダではファイルの変更を検知できないため、vagrant-notify-forwarderConnectionプラグインを入れる。

$ vagrant plugin install vagrant-notify-forwarder
$ vagrant reload