[vuejs/vue-cli]VUE 更新至最新版本(3.4.1),使用VUEcli创建的项目,无法热更新!

2024-07-05 549 views
3
Version

3.4.1

Environment info
Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 10.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
    @vue/cli-plugin-unit-mocha: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    vue: ^2.5.22 => 2.6.6
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.2
    vue-loader:  15.6.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.6
    vue-template-es2015-compiler:  1.8.2
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

之前创建的项目都可以热更新,但是升级版本之后,不能热更新,只能通过点击浏览器刷新达到更新的目的!


回答

3

请提供复现代码。我本地无法重现你说的问题。

5

@zlzgit

Try to do it with yarn. For me it was

npm i -g yarn install yarn

yarn to install packages

yarn serve to run the server

cancel the process

npm run serve run standard npm script

5

根据楼上的方法 我在style scoped中修改 css 热更新 是好用的, 在man.js 中的less文件 只有启动后的第一次修改会被热更新

6

我将vue-cli更新到最新版也出现了这种问题,后来发现我的热更新失效是webpack版本的问题,@vue中的一些包限制了webpack的版本,如下:"webpack": ">=4 < 4.29",但是有其他依赖安装了最新版的webpack,导致热更新失效,最后统一webpack版本就可以热更新了。

@sodatea 为什么要限制webpack的版本?我看了下提交记录,是最近几个版本才添加限制的。

5

+1,我也遇到这个问题了,修改css热更新失效

3

请遇到这个问题的各位提供一下复现代码……不然我们无法定位问题。

4

@sodatea 就是cli自己生成的初始代码,改样式或者改html热更新也没有效果。自定义配置: babel + router + vuex + eslint + prettier + stylus

7

在本地开发环境,单文件组件中,style标签下,写less,热更新在配置vue.config.js之后是有效的。 在style下引入公用的less文件后,热更新无效。 vue.config.js的配置如下,根据官方文档改了配置 module.exports = { css: { extract: false, } } 某个单文件组件的引用如下 <style lang="less" scoped> @import "../common/less/common.less"; .home { width: 1920vw*@vw-ratio; height: 1044vw*@vw-ratio; } </style> 公用common.less 文件部分如下 @vw-ratio: 100/1920;

已经解决了,本地开了代理的原因。和框架本身无关。

9

遇到了这个问题,感谢提供参考帮助。

1

我下载最新的code也遇到了这个问题,我用的Ubuntu18 系统,我出现这种情况是因为用vscode 开发,排查各种情况之后无意间发现vscode出现一个提示。Visual Studio Code is unable to watch for file changes in this large workspace

上述内容的大意是指,目前文件监控的实际数目已超出当前设置值,因此无法通知热更新。

1. 检查现有文件监控数目

cat /proc/sys/fs/inotify/max_user_watches 我的机器显示是 8192

2. 修改文件监控数目

综合考虑实际需监控文件的数目和内存消耗情况,我将新的文件监控数目设置为:81920,即原来监控数目的10倍
sudo vi /etc/sysctl.conf 在该配置文件的最后一行加上下述语句:
fs.inotify.max_user_watches=81920

3. 让配置文件中的新文件监控数目生效

sudo sysctl -p
result
fs.inotify.max_user_watches = 81920

4. reopen VSCode