如何移除Vue项目运行时站点URL中的端口号

解决方法 #

浏览器默认不会显示HTTP协议的80端口、HTTPS协议的443端口，要实现无端口号访问，按以下两种方案操作即可： #

方案1：直接修改开发服务端口（最简便）

修改vue.config.js中devServer的配置：

• 如果你当前用的是HTTP协议，将port改为80
• 如果你需要用HTTPS协议，先将https设为true，再将port改为443

修改后的配置示例：

module.exports = {
    chainWebpack: config => {
      config.plugins.delete('prefetch');
    },
    devServer: {
        host: 'example.com',
        https: false, // 需HTTPS就改为true，对应port改为443
        port: 80, 
        public: 'example.com'
    }, 
}

注意：1024以下的端口属于系统保留端口，启动服务时需要管理员/root权限，Linux/Mac下可以用sudo yarn serve启动，Windows需要右键以管理员身份运行终端再执行启动命令。 #

方案2：用反向代理转发请求（无需修改开发服务端口）

如果不想占用80/443端口，或者端口被其他服务占用，可以用Nginx、Caddy等反向代理工具做端口转发：
以Nginx为例，添加如下站点配置：

server {
    listen 80;
    server_name example.com;
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

启动Nginx后，直接访问https://example.com就能自动转发到本地8080端口的开发服务，不需要加端口号。

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