自 vue cli 插件更新 (v5) 以来，HMR 不工作

Question

版本

5.0.1

复制link

环境信息

Environment Info:

  System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: 97.0
  npmPackages:
    @gtm-support/vue-gtm: ^1.3.0 => 1.3.0 
    @intlify/eslint-plugin-vue-i18n: ^1.2.0 => 1.2.0 
    @intlify/vue-devtools:  9.2.0-beta.22 
    @vue/apollo-option: ^4.0.0-alpha.15 => 4.0.0-alpha.15 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.1 
    @vue/cli-plugin-babel: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-eslint: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-router:  5.0.1 
    @vue/cli-plugin-typescript: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-unit-jest: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-vuex:  5.0.1 
    @vue/cli-service: ^5.0.1 => 5.0.1 
    @vue/cli-shared-utils:  5.0.1 
    @vue/compiler-core:  3.2.30 
    @vue/compiler-dom:  3.2.30 
    @vue/compiler-sfc:  3.2.30 
    @vue/compiler-ssr:  3.2.30 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.0.0-beta.20.1 
    @vue/eslint-config-airbnb: ^5.3.0 => 5.3.0 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    @vue/reactivity:  3.2.30 (3.2.31)
    @vue/reactivity-transform:  3.2.30 
    @vue/runtime-core:  3.2.30 (3.2.31)
    @vue/runtime-dom:  3.2.30 (3.2.31)
    @vue/server-renderer:  3.2.30 
    @vue/shared:  3.2.30 (3.2.31)
    @vue/test-utils: ^2.0.0-rc.18 => 2.0.0-rc.18 
    @vue/vue3-jest: ^27.0.0-alpha.4 => 27.0.0-alpha.4 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.17.0 => 7.17.0 
    eslint-plugin-vue-scoped-css: ^1.3.0 => 1.3.0 
    floating-vue: ^2.0.0-beta.1 => 2.0.0-beta.1 
    jest-serializer-vue:  2.0.2 
    jest-serializer-vue-tjw: ^3.19.0 => 3.19.0 
    stylelint-config-recommended-vue: ^1.2.0 => 1.2.0 
    typescript: ^4.4.2 => 4.4.2 
    vue: ^3.2.30 => 3.2.30 
    vue-apollo: ^3.0.7 => 3.0.7 
    vue-chart-3: ^3.1.1 => 3.1.1 
    vue-cli-plugin-webpack-bundle-analyzer: ~4.0.0 => 4.0.0 
    vue-composition-test-utils: ^1.0.3 => 1.0.3 
    vue-ctk-date-time-picker3: ^2.5.2 => 2.5.2 
    vue-demi:  0.4.5 (0.12.1)
    vue-eslint-parser:  7.10.0 (8.0.1)
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^9.2.0-beta.22 => 9.2.0-beta.22 
    vue-loader:  17.0.0 (15.9.8)
    vue-resize:  2.0.0-alpha.1 
    vue-router: ^4.0.12 => 4.0.12 
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.1

重现步骤

HMR/Hot-reload 不起作用，并且在控制台中出现错误，例如“加载页面时与 wss://custom-url:8080/ws 的连接被中断……”会不断抛出。所以 devServer 设置一定有问题，但我尝试了很多不同的设置，但找不到一个有效的设置。

当我更改模板中的任何内容时，我通常会遇到类似的错误，例如： Uncaught TypeError: can't access property "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Suppliers/Suppliers.vue?vue&type=script&lang=js", currentUpdate is undefined

期望什么？

HMR 应该像在更改为 v5 插件之前一样工作

实际发生了什么？

HMR 不起作用，我的更改仅在我重新加载页面时可见

这是关于一个旧的 vue 2.6.x 项目正在完全迁移到 vue 3。不幸的是，它是关于一个整体应用程序的，所以不可能完全复制，但我希望发布所有配置文件可能足以找出问题所在。如果您需要任何其他配置文件或任何其他帮助调试的东西，请告诉我。

我在终端中也看到错误： Proxy error: Could not proxy request /app.e9978b73a5a9070c.hot-update.json from CUSTOM-URL:8080 to https://CUSTOM-URL/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

提前感谢您的帮助！

Answer 1

我的团队可以通过将优化对象添加到我们的 webpack 配置（在 vue.config.js 中）来修复它：

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

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

它为我们修复了 HMR，但是，如果您使用的是 firefox，您的控制台可能仍然会收到如下错误消息：The connection to wss://SANDBOX_HOSTNAME:8080/ws was interrupted while the page was loading.

自 vue cli 插件更新 (v5) 以来，HMR 不工作

HMR doesn't work since the vue cli plugins update (v5)

vue.js

webpack-dev-server

vuejs3

webpack-5

vue-cli-5

版本

复制link

环境信息

重现步骤

期望什么？

实际发生了什么？