如何将Vue开发服务器对接Node.js后端？无需重复构建dist

核心配置修正 #

你的target属性需填写Node.js后端的实际访问地址，由于你的Node服务运行在443端口（HTTPS默认端口），分两种场景配置：

• 本地开发环境：target: 'https://localhost:443'
• 绑定域名的环境：target: 'https://<你的站点URL>'（443是HTTPS默认端口，可省略不写）

完整vue.config.js配置 #

考虑到HTTPS环境可能存在的SSL验证问题，本地自签名证书场景需添加secure: false，最终配置如下：

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://localhost:443', // 替换为你的Node后端实际地址
        changeOrigin: true,
        secure: false // 本地自签名证书环境必填，避免SSL校验失败
      }
    }
  }
}

正确使用流程 #

1. 先启动Node.js后端服务（确保它监听443端口）
2. 启动Vue开发服务器（默认端口通常为8080）
3. 直接访问Vue开发服务器地址（比如http://localhost:8080）：
   • 页面为Vue开发环境的热重载版本，无需构建复制dist文件夹
   • 页面中所有/api开头的请求，会自动被代理到Node后端的443端口处理

访问误区说明 #

你之前直接访问https://<站点URL>:<端口>/api是错误的：

• Vue开发服务器与Node后端是独立服务，Vue页面需从Vue开发服务器获取，而非Node后端的dist文件
• 代理的作用是让Vue开发服务器转发接口请求到Node后端，而非让Node后端返回Vue页面

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