vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

The HMR function cannot be used #6967

Closed wdlnydhcg closed 2 years ago

wdlnydhcg commented 2 years ago

Version

5.0.0-rc.2

Reproduction link

github.com

Environment info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Not Found
    Firefox: 35.0.1
    Safari: 15.0
  npmPackages:
    @ant-design/icons-vue:  6.0.1 
    @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.0-rc.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.0-rc.2 
    @vue/cli-plugin-babel: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-eslint: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-router: ~5.0.0-rc.1 => 5.0.0-rc.1 (5.0.0-rc.2)
    @vue/cli-plugin-typescript: ~5.0.0-rc.1 => 5.0.0-rc.1 
    @vue/cli-plugin-vuex:  5.0.0-rc.2 
    @vue/cli-service: ^5.0.0-rc.2 => 5.0.0-rc.2 
    @vue/cli-shared-utils:  5.0.0-rc.1 (5.0.0-rc.2)
    @vue/compiler-core:  3.2.26 
    @vue/compiler-dom:  3.2.26 
    @vue/compiler-sfc:  3.2.26 
    @vue/compiler-ssr:  3.2.26 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.0.0-beta.21.1 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vue/reactivity:  3.2.26 
    @vue/reactivity-transform:  3.2.26 
    @vue/runtime-core:  3.2.26 
    @vue/runtime-dom:  3.2.26 
    @vue/server-renderer:  3.2.26 
    @vue/shared:  3.2.26 
    @vue/web-component-wrapper:  1.3.0 
    ant-design-vue: ^3.0.0-beta.8 => 3.0.0-beta.8 
    eslint-plugin-vue: ^8.0.3 => 8.3.0 
    typescript: ~4.1.5 => 4.1.6 
    vue: ^3.2.13 => 3.2.26 
    vue-cli-plugin-style-resources-loader: ~0.1.5 => 0.1.5 
    vue-demi:  0.12.1 
    vue-eslint-parser:  8.0.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.9.8)
    vue-router: ^4.0.3 => 4.0.12 
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
    vue-types:  3.0.2 
    vue3-perfect-scrollbar: ^1.5.5 => 1.5.5 
  npmGlobalPackages:
    @vue/cli: 5.0.0-rc.2

Steps to reproduce

  1. vue create xx-xx
  2. import pinia less eslint prettier,
  3. I don't know when HMR failed,however, HMR of my project is invalid and no error has been reported

What is expected?

code updated in real time

What is actually happening?

After I created the project with Vuecli, the HMR function failed. I don't know why, because there is no error

wdlnydhcg commented 2 years ago

I think it's probably webpack5, I tried to build VUe3 + TS +less with Webpack5. The page can be accessed normally, but HMR is also invalid

wdlnydhcg commented 2 years ago

After setting the vue.config.js file, the problem is resolved

...
devServer: {
    hot: false,
  },