爲什麼LiveReload不適用於vagrant的vue-cli項目？

這是我第一次嘗試vue-cli，爲了避免在全球範圍內安裝npm-packages，我使用了Vagrant。爲什麼LiveReload不適用於vagrant的vue-cli項目？

Vagrantfile

Vagrant.configure("2") do |config| 
config.vm.box = "ubuntu/xenial64" 
config.vm.hostname="vagrant" 
config.vm.network "forwarded_port", guest: 8080, host: 4545 
config.vm.synced_folder ".", "/home/project" 
config.vm.provision :shell, path: "provision.sh", privileged: false 
end

provision.sh

#!/usr/bin/env bash 

# installing packages 
sudo apt update 
sudo apt install build-essential libssl-dev -y 

# installing nvm 
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash 
source ~/.nvm/nvm.sh 

# installing node 
nvm install node 
nvm alias default node 
nvm use node 

# installing vue-cli 
npm install -g vue-cli

初始化項目並安裝：
vue init webpack my-project
npm install

項目結構：

. 
├── my-project 
│   ├── build 
│   ├── config 
│   ├── index.html 
│   ├── node_modules 
│   ├── package.json 
│   ├── README.md 
│   ├── src 
│   ├── static 
│   └── test 
├── provision.sh 
└── Vagrantfile

運行命令NPM運行後開發出現兩個警告：

(node:1787) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

(node:1787) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

但一切工作

DONE Compiled successfully in 4188ms 
> Listening at http://localhost:8080

而且我可以看到我的localhost:4545

運行項目，然後我編輯Hello.vue文件並保存。即使強制重新啓動，瀏覽器也不會更改。
在終端中，它也沒有改變它處於待機模式。

的變化將是可見的只有中斷命令npm run dev並重新運行。

來源

2017-01-16 in-in

這種掙扎良久之後，我終於發現如何做到這一點。這樣做：

/build/dev-server。JS

var devMiddleware = require('webpack-dev-middleware')(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    quiet: false, 
    stats: { 
    colors: true, 
    chunks: false 
    }, 
    watchOptions: { //Add Polling 
    aggregateTimeout: 300, 
    poll: true 
    } 
})

來源

2017-01-19 19:39:38 Julian

下面寫了正確的答案，我的CPU使用率與'watchOptions'一起達到了100％，所以我將它備份到poll：1500，忽略：/ node_modules /'。 –

通過inotify通知需要內核知道所有相關的文件系統事件，這對於網絡文件系統（如NFS）並不總是可能的。

您將需要輪詢，因此Webpack將每隔幾百毫秒檢查一次以查看您的文件是否已更新。

watchOptions: { 
    poll: true 
}

您webpack.dev.conf.js

編輯的底部：LiveReload Chrome擴展程序偵聽端口35729.以下內容添加到您的Vagrantfile

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

來源

2017-01-17 23:06:22

我添加了這個選項，但是沒有結果 https://gist.github.com/in-in/02549afdc58d5ac9d1a2060a211e561e –

我已經編輯我的答案 –

應該沒有任何瀏覽器擴展程序工作。 @Julian在 –

爲什麼LiveReload不適用於vagrant的vue-cli項目？

回答

相關問題