webpack - 为什么 LiveReload 在使用 Vagrant 的 vue-cli 项目中不起作用?

标签 webpack vagrant vue.js

这是我第一次尝试 vue-cli,为了避免全局安装 npm-packages,我使用了 Vagrant。

Vagrant 文件

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 我的项目
npm 安装

项目结构:

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

运行命令npm run dev后出现两个警告:

(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 上看到正在运行的项目

Running project

然后我编辑 Hello.vue 文件并保存。即使强制重启,浏览器也不会改变。
在终端中,它处于待机模式也没有任何变化。

The browser does not change

仅当中断命令 npm run dev 并再次运行它时,更改才会可见。

最佳答案

经过长时间的努力,我终于找到了如何做到这一点。这样做:

/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
  }
})

关于webpack - 为什么 LiveReload 在使用 Vagrant 的 vue-cli 项目中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41685966/

相关文章:

javascript - 如何使用 vuejs 避免重复的 websocket 客户端

javascript - webpack 4 - 用于多个条目的拆分块插件

webpack - Aurelia:错误:当同名元素已存在时尝试注册元素。名称:n. - 仅发生在生产 webpack 构建中

javascript - 如何告诉express js使用webpack+react作为前端

java - 使用 "vagrant up"安装 java 8 (jdk 1.8) 在 debian 上不起作用

ubuntu - XAMPP 安装在 ubuntu 上值得信赖的 vagrant

vue.js - 使用Vuetify进行动态计算

javascript - 抛出新错误(`弃用通知 : CommonsChunkPlugin now only takes a single argument

chef-infra - 通过 Vagrant + Chef 安装多个包

javascript - Vue.js 中计算属性和普通数据的区别