升级到v5后Vue CLI HMR不工作

Question

我正在使用Django+Vue开发工具(Docker)开发一个VSCode应用程序。

最近，我从Vue CLI v4迁移到了迁移指南之后的Vue CLI v5。

迁移后，dev-server的HMR停止工作.。

这是迁移之前的vue.config.js：

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    public: "0.0.0.0:8080",
    https: false,
    headers: { "Access-Control-Allow-Origin": ["*"] },
    hotOnly: true,
    watchOptions: {
      ignored: "./node_modules/",
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
  transpileDependencies: ["vuetify"],
  css: {
    sourceMap: true,
  },
  chainWebpack: (config) => {
    config.plugin("BundleTracker").use(BundleTracker, [
      {
        filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
      },
    ]);
    config.resolve.alias.set("__STATIC__", "static");
  },
};

及之后：

const { defineConfig } = require("@vue/cli-service");
const BundleTracker = require("webpack-bundle-tracker");

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    client: {
      webSocketURL: "auto://0.0.0.0:8080/ws",
    },
    https: false,
    headers: { "Access-Control-Allow-Origin": ["*"] },
    hot: "only",
    static: {
      watch: {
        ignored: "./node_modules/",
        aggregateTimeout: 300,
        poll: 1000,
      },
    },
  },
  transpileDependencies: ["vuetify"],
  css: {
    sourceMap: true,
  },
  chainWebpack: (config) => {
    config.plugin("BundleTracker").use(BundleTracker, [
      {
        filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
      },
    ]);
    config.resolve.alias.set("__STATIC__", "static");
  },
});

迁移之后，每次运行npm run serve时都会显示一个新的警告(但是devServer.public在v5中被删除了！)：

  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.

  Since you are using a non-root publicPath, the hot-reload socket
  will not be able to infer the correct URL to connect. You should
  explicitly specify the URL via devServer.public.

  Access the dev server via http://localhost:<your container's external mapped port>http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

有什么想法吗？提前感谢！

Answer 1

我的团队有类似的问题，正如你所描述的。我们可以通过将优化对象添加到Webpack配置(vue.config.js`)来修复它。

const {defineConfig} = require('@vue/cli-service');

module.exports = defineConfig({
    /* your config */
    configureWebpack: {
        optimization: {
            runtimeChunk: 'single',
        },
    },
    devServer: {
        // we need this for apollo to work properly
        proxy: `https://${process.env.SANDBOX_HOSTNAME}/`,
        host: '0.0.0.0',
        allowedHosts: 'all',
    },
});

optimization部分为我们修复了HMR。但是，如果您使用的是Firefox，那么您的控制台可能仍然会收到以下错误消息：

到wss://SANDBOX_HOSTNAME:8080/ws的连接在页面加载时被中断。

对于我们来说，这是vue 3的阻断剂，所以我希望它能有所帮助。✌️