当前位置:  开发笔记 > 编程语言 > 正文

为什么LiveReload不能在Vagrant的vue-cli项目中工作?

如何解决《为什么LiveReload不能在Vagrant的vue-cli项目中工作?》经验,为你挑选了2个好方法。

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

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

Init项目并安装:
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 run dev出现两个警告:

(node:1787)UnhandledPromiseRejectionWarning:未处理的promise promise(拒绝ID:1):错误:退出代码3

(node:1787)DeprecationWarning:不推荐使用未处理的拒绝承诺.将来,未处理的承诺拒绝将使用非零退出代码终止Node.js进程.

一切正常

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

我可以在我的localhost上看到正在运行的项目:4545

运行项目

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

浏览器不会更改

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



1> Julian..:

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

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



2> Jan Doleczek..:
Vue CLI 3.0.0的解决方案

有两个问题需要解决:

    流浪者机器无法从主机获取有关更改的信息;

    sockjs-node可能是为本地主机配置的。

    为webpack设置池;

    在webpack devServer配置中设置公共地址。

在项目主目录中创建vue.config.js文件:

module.exports = {
  configureWebpack: {
    devServer: {
        watchOptions: {
          ignored: ['node_modules'],
          aggregateTimeout: 300,
          poll: 1500
        },
        public: '192.168.56.132' // vagrant machine address
    }
  }
}

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有