文章/答案/技术大牛

发布

社区首页 >问答首页 >由于vue cli插件更新(v5)，HMR无法工作。

问由于vue cli插件更新(v5)，HMR无法工作。
EN

Stack Overflow用户

提问于 2022-03-08 09:47:03

回答 1查看 425关注 0票数 0

版本

5.0.1

再生产环节

github.com

环境信息

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/热重加载无法工作，并且在控制台中出现了错误，例如“连接到wss://定制-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).

谢谢你提前帮忙！

webpack-5

vue-cli-5

vue.js

vuejs3

webpack-dev-server

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-03 21:44:49

我的团队可以通过将优化对象添加到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.

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71392920

复制

相似问题

问由于vue cli插件更新(v5)，HMR无法工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于vue cli插件更新(v5)，HMR无法工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于vue cli插件更新(v5)，HMR无法工作。
EN