Vue项目运行异常：VS启动错误项目及端口配置疑问

1. 8085端口的配置位置在哪？ #

其实8085并不是你手动配置的端口，而是Vue CLI的自动端口选择机制导致的：

• Vue CLI默认会从8080开始尝试启动开发服务器，如果8080被其他进程（比如你之前的foo-app）占用，就会自动递增端口号（8081、8082...直到找到可用的，这里就是8085）。
• 如果想要手动固定这个端口，有两种可靠方式：
  • 项目根目录创建vue.config.js文件，添加devServer端口配置：

    module.exports = {
      devServer: {
        port: 8085 // 固定你想要的端口
      }
    }
    

  • 或者修改package.json的serve命令：

    "serve": "vue-cli-service serve --port 8085"
    

    不过注意，这个方式会被VS的自动配置覆盖，所以更推荐用vue.config.js。

2. 为何VS会将项目运行在8080端口？ #

这是Visual Studio的ASP.NET Core Vue模板的内置默认行为：

• 当你在VS中按F5运行时，模板的UseVueCli方法会自动给npm命令追加--port 8080参数，强制Vue服务启动在8080，这就会覆盖你自己在package.json或vue.config.js里的端口设置，甚至导致命令冲突。
• 解决这个问题的方法：
  • 修改Startup.cs中的UseVueCli调用，手动指定你想要的端口：

    spa.UseVueCli(npmScript: "serve", port: 8085);
    

    这样VS就会用你指定的端口启动Vue服务，不会再自动追加--port 8080了。
  • 另外，你遇到的“浏览器打开50800却显示foo-app”的问题，大概率是端口占用+浏览器缓存导致的：先关闭所有运行中的node进程（可以用任务管理器结束node.exe，或者执行命令taskkill /f /im node.exe），然后清理项目的bin/obj文件夹，重启VS，再清除浏览器缓存后重新测试。

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