如何无需输入端口号即可通过公网HTTPS地址访问Vue.js应用

核心问题修正 #

你当前使用的devServer是webpack提供的开发调试服务器，仅适用于本地开发场景，完全不满足生产上线的性能、安全要求，绝对不能用来做生产环境的站点托管，这是你首先要调整的核心错误。

标准生产部署方案 #

• 首先执行生产构建命令生成静态资源：

  npm run build
  

  命令执行完成后会生成dist目录，目录内就是可以直接部署的站点静态文件。
• 选择生产级Web服务器（比如Nginx、Caddy）托管dist目录的文件，配置HTTPS服务监听443端口（HTTPS协议默认端口），即可实现用户直接访问www.domain.de就能打开站点的需求，同时80端口可以配置跳转规则，把所有HTTP请求自动跳转到HTTPS的443端口。

临时本地测试调整方案 #

如果你只是需要临时测试公网访问效果，不想部署生产服务器，可以调整vue.config.js的devServer配置解决端口问题：

1. HTTPS协议的默认端口是443而非80，你当前把HTTPS服务绑定在80端口上，浏览器默认访问HTTPS站点会请求443端口，所以直接访问域名无法打开，只有手动加:80才能访问，把port参数从80修改为443即可
2. 将public参数从https://localhost修改为你的实际域名https://www.domain.de

内容的提问来源于stack exchange，提问作者silliton