如何修复 Vue 2 应用程序上的热重载？答案

【问题标题】：How to fix Hot Reload on Vue 2 application?如何修复 Vue 2 应用程序上的热重载？
【发布时间】：2021-09-03 00:59:50
【问题描述】：

我正在开发 Vue 2 cli 应用程序。

热重载不起作用，大概是因为 “[WDS] 断开连接！”和 'sockjs-node ERR_CONNECTION_TIMED_OUT' 错误。

客户端在“http://localhost:8080”（Vue 2）上运行

服务器正在“https://localhost:5001”（Dotnet 核心）上运行

客户端被代理到“https://localhost:5001”，因此应用程序使用该 URL 在浏览器中打开

############

这是我的 babel.config.js 文件：

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
};

还有我的 vue.config.js

module.exports = () => {
  const config = {
    lintOnSave: false,
    configureWebpack: {
      devtool: 'inline-source-map'
    },
    transpileDependencies: ["vuetify"],
    devServer: {
      //
    },
    chainWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        config
          .plugin('html')
          .tap(args => {
            args[0].publicPath = '/dev/';
            return args;
          });
      } else {
        // nothing to do here
      }
    }
  };

  if (process.env.NODE_ENV === 'production') {
    config.publicPath = '/dev/';
  }

  return config;
};

我正在尝试修复热重载，我认为这是因为 Webpack 开发服务器在错误的端口请求文件。

【问题讨论】：

标签： vue.js webpack .net-core babeljs hot-reload

【解决方案1】：

我设法通过将这些道具添加到 vue.config.js 文件来解决这个问题

devServer: {
  port: 8080,
  public: 'https://localhost:5001'
},

我当然希望这会对那里的人有所帮助

【讨论】：