为 ASP.NET Core MVC 应用程序和 Vue 客户端设置代理开发服务器答案

【问题标题】：Setup proxy dev server for ASP.NET Core MVC application and Vue clients为 ASP.NET Core MVC 应用程序和 Vue 客户端设置代理开发服务器
【发布时间】：2020-04-23 21:19:48
【问题描述】：

我正在尝试为 ASP.NET Core Web 应用程序设置开发环境，该应用程序使用标准 mvc 身份验证和两个 Vue.Js 应用程序在路由上提供服务：/first-vue 和 /second-vue。我的目标是开发一个应用程序，该应用程序不被分割，而是完整的工作应用程序，因为它将在生产中工作。对于生产，我的解决方案是将vue.config.js 文件中的 outputDir 更改为 wwwroot，但问题在于开发，因为我想使用热重载功能。

【问题讨论】：

标签： asp.net asp.net-mvc vue.js asp.net-core webpack

【解决方案1】：

如果你的后端在 localhost:80 上运行，而你的 vue 应用在 localhost:8080 上运行，你可以将特定请求代理到后端前缀路由，以便开发服务器了解要代理的请求

// vue.config.js
module.exports = {  
  devServer: {
    port: 8080,
    proxy: {
      "/api": {
        target: "http://localhost:80"
      }
    }
  }
}

现在对 /api/first-vue 和 /api/second-vue 的请求将被代理到第 80 个端口

【讨论】：