Visual Studio 2022 Vue 模板的 HMR tls 问题答案

【问题标题】：HMR tls issues with Visual Studio 2022 Vue templateVisual Studio 2022 Vue 模板的 HMR tls 问题
【发布时间】：2021-12-31 15:43:46
【问题描述】：

我正在使用Microsoft Vue tutorial 来创建具有独立前端和后端项目的解决方案。我正在使用启用 tls 的默认配置，并且我信任 IIS Express 开发证书，但前端项目似乎在 hmr 请求中使用公共 IP 地址，该地址未包含在仅基于 localhost 的开发证书中。

我的vue.config.js如下：

const fs = require('fs')
const path = require('path')
const HttpsAgent = require('agentkeepalive').HttpsAgent

const baseFolder =
  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
    ? `${process.env.APPDATA}/ASP.NET/https`
    : `${process.env.HOME}/.aspnet/https`

const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0]
const certificateName = certificateArg ? certificateArg.groups.value : 'WebAppFrontend'

if (!certificateName) {
  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
  process.exit(-1)
}

const certFilePath = path.join(baseFolder, `${certificateName}.pem`)
const keyFilePath = path.join(baseFolder, `${certificateName}.key`)

module.exports = {
  devServer: {
    // host: 'localhost',
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    },
    proxy: {
      '^/weatherforecast': {
        target: 'https://localhost:5001/',
        changeOrigin: true,
        agent: new HttpsAgent({
          maxSockets: 100,
          keepAlive: true,
          maxFreeSockets: 10,
          keepAliveMsecs: 100000,
          timeout: 6000000,
          freeSocketTimeout: 90000
        }),
        onProxyRes: (proxyRes) => {
          const key = 'www-authenticate'
          proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(',')
        }
      }
    },
    port: 5002
  }
}

我尝试手动将 webpack host 选项设置为 localhost，但 Visual Studio 无法启动后端项目。如果我将启动项目从前端和后端项目都修改为仅后端，然后手动执行npm run serve，一切正常。

如何在不破坏 Visual Studio 调试设置的情况下强制 SockJS 调用使用 localhost 而不是公共 IP 地址？

【问题讨论】：

标签： visual-studio vue.js webpack vue-cli

【解决方案1】：

只需修复相同的错误。试试这个

在 vue.config.js 中

module.exports = {
devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:5002',
    disableHostCheck: true,

【讨论】：