这是我第一次尝试使用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
再次运行时,更改才会可见.
经过长时间的努力,我终于找到了如何做到这一点.做这个:
/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 } })
有两个问题需要解决:
流浪者机器无法从主机获取有关更改的信息;
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 } } }