如何在实时服务器上使用 Webpack 运行 Vue cli？答案

【问题标题】：How to run Vue cli with Webpack on live server?如何在实时服务器上使用 Webpack 运行 Vue cli？
【发布时间】：2016-12-26 08:35:32
【问题描述】：

昨天我从 Digital Ocean 买了一个 droplet，开始直接在实时服务器上学习新东西。我从Vue 开始。我遵循Vue cli 和webpack 安装指南。一切顺利。

我遇到的问题是访问网址时。例如：127.12.22.33/test/testvue app 我得到一个白页，没有任何Vue。

当我运行npm run dev 时，它告诉我访问localhost:8080，但当然不会工作。如果我访问 127.12.22.33:8080 我会得到 p>

ERR_CONNECTION_TIMED_OUT 错误

问题：

当我访问 url 以显示 vue 代码时，如何使其在实时服务器（非本地）上工作？我想我错过了什么或者我做错了什么。

【问题讨论】：

【解决方案1】：

您的问题是您在 localhost 上运行 vue dev 服务器，因此无法公开访问它。为了使其公开可用，请打开 build/dev-server.js 并更改以下几行：

module.exports = app.listen(port,'0.0.0.0' ,function (err) {
if(err){
console.log(err)
return
}

【讨论】：

嗨，感谢您的回答。我已经使用了my-ip:8080，但仍然出现连接超时错误。您告诉我要更改的是控制台输出，而不是如何使其工作.....
更改 console.log 不会影响开发服务器。签出此SO question。将 app.listen(port, callback) 更改为 app.listen(80, '0.0.0.0', callback)

【解决方案2】：

感谢您的回答，但问题出在其他地方。

http://my-ip:8080/ 无法正常工作，因为防火墙不允许端口:8080。不久后发现Droplet镜像自带防火墙。

必须运行下一个命令才能将端口添加到防火墙：

sudo ufw allow 8080

【讨论】：