vue-cli4热更新失效问题

最新推荐文章于 2024-05-11 14:26:07 发布

原创最新推荐文章于 2024-05-11 14:26:07 发布 · 972 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #javascript

vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

vue-cli((脚手架)

6 篇文章

订阅专栏

本文介绍了如何设置Webpack-Dev-Server以实现Vue项目的热更新和自动启动浏览器。首先通过npm安装webpack-dev-server，然后在vue.config.js中配置devServer，包括端口、主机地址、HTTPS选项等。接着，修改package.json的脚本，将'vue-cli-service serve'与'webpack-dev-server --open'结合，确保项目启动时自动打开浏览器并启用热更新。最后，重启项目，即可享受无缝开发体验。

①：安装 webpack-dev-server

npm install --save-dev webpack-dev-server

②：修改vue.config.js配置

devServer: {
    port: 3033,
    host: "0.0.0.0",
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
    disableHostCheck: true, //webpack4.0 开启热更新
  },

③：更改packjson.js

"serve": "vue-cli-service serve && webpack-dev-server --open",

④：重启项目

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小灰灰城堡

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-cli-浏览器实现热更新

ioncannontic的博客

03-14

1619

vue-cli-浏览器实现热更新

vue-cli 关闭热更新操作

01-18

vue 手脚架在使用过程中，更改代码会自动更新页面，非常的方便，但是有些情况向关闭掉这热更新功能，我使用的是vue-admin-template模板来开发的，所以更改也是基于这个模板的。在build文件夹下有个webpack.dev.conf.js文件。然后添加一个配置项：inline: false 即可关闭热更新操作。补充知识： vue多页面热更新缓慢原因以及解决方法 热更新慢的原因多页面就是多入口，会生成多个html文件，之前我基本都是单页面，因为是单入口没有这个问题，当偶然间接触了一个多页面的项目发现了热更新很慢的问题，这当然很不舒服，就开始查方法，可能要2，3分钟，这个和w

1 条评论您还未登录，请先登录后发表或查看评论

解决vuecli3.0热更新失效的问题

10-17

今天小编就为大家分享一篇解决vuecli3.0热更新失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

【疑难杂症】vue-cli热更新失效

热门推荐

onionlsh的博客

03-26

1万+

前情提要公司又双叒要搭建新的前端项目，以前用vue-cli3.0，所以这次就是用vue-cli4来搭建一下玩玩。结果玩不好，vue-cli搭建的vue项目，部分热更新失败。主要体现在：1..vue文件的修改，可以实现热更新；2.在main.js等引入的文件，无法实现热更新。过程私以为是vue-cli版本不同导致的，所以在找度娘的过程中，也指定了是vue-cli4 结果试过很多方法： 1.配置vue.config.js，几个关键的属性也都开了 devServer: { hot:

vue-cli4 APP热更新失效不可以及时更新

pxhing的博客

04-09

5293

前言项目中遇到问题，热更新失效，不能每次及时提醒，百度了很多方法，效果不是狠显著，后来发现webpack4.0需要手动配置开启热更新，默认没有开启解决办法一，安装依赖webpack-dev-server 根据自己的情况安装npm / cnpm npm install --save-dev webpack-dev-server / cnpm install --save-dev webpa...

vue基于vue-cli4+版本开发 热更新失效问题

qq_34507902的博客

03-01

587

vue基于vue-cli4+版本开发 热更新失效问题

vue 项目热更新失效的问题

qq_41725253的博客

07-18

720

网上找了很多种解决方法并未解决，重新下node_modules 也没有用，最后是更新了@vue/cli-service 的版本，重新启动就可以了。原本是 3.3 升级为3.12。

vue-cli4热更新失效解决

Ali_code的博客

09-15

1852

解决以上报错导致热更新不生效,不要手动修改node_modules文件里的东西!!!!!!!!!!! vue-cli4热更新配置一，安装依赖webpack-dev-server 根据自己的情况安装npm / cnpmnpm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server二，配置vue.config.js文件由于vue-cli4文件夹和之前有很大的出入所以要在vue.confi...

Vue Cli4 热更新失效，浏览器不会自动刷新内容

Wzw的博客

04-20

5614

Vue Cli4 热更新失效在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。 module.exports = { devServer: { port: 3000, open: true, hot: true,//自动保存 }, } 再重新加载项目即可。有时这样任然无法解决问题，原因好像在于版本问题。解决办法：

Vue-cli@4.x sockjs-node/info失败导致无法热更新

liuarmyliu的博客

03-12

2199

最近在写基于vue-cli@4.5写Vue3项目，写着写着发现不太对劲，每次我修改了*.vue文件后都自己手动刷新才显示新修改的内容，我一直记得vue2项目都是有热更新的，而且到Vue3官方文档也说明了脚手架安装的项目自带热更新，拆箱即用一开始我以为是我项目写的过程中修改了某些配置，导致热更新失败了，我又重新创建了一个vue3项目结果项目启动后依旧没有热更新，我打开network一看，居然有一堆报错，因为是sockjs.js，所以我猜测我的热更新失败因该是和这个有关我的报错信息，我看了这个请求的

vue-cli3 热更新配置操作

10-14

主要介绍了vue-cli3 热更新配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

10-17

今天小编就为大家分享一篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue-cli 4.0 Webpack4.0 无法热更新

Hfuns

12-30

1540

Vue-cli 4.0 Webpack4.0 无法热更新题情景再现1. 注释sockjs的抛出异常代码2. 手动添加热更新代码（在我这个自启动vpn代理的环境下无效）情景再现无论如何设置，都会报这个错 sockjs net::err_network_access_denied sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNECTION_TIMED_OUT 并

Vue热更新失效

前端小菜鸟也有人起的博客

04-09

508

Vue热更新失效

vue-cli 项目热重载（热更新）失效的解决方法

我的米饭

11-04

1万+

打开 node_modules 下的这个文件 sockjs-client\dist\sockjs.js

vue项目无法热更新 问题解决

qq_44741577的博客

05-11

2196

如果没有安装，可以使用以下命令进行安装。

vue-cli@5.x 页面正常加载，但无法热更新

qq_40147756的博客

07-22

1370

vue-cli@5.x 页面正常加载，但无法热更新。

vue之vue-cli4热更新

weixin_47409897的博客

05-06

1426

目录vue之vue-cli4热更新vue.config.jsonpackage.json vue之vue-cli4热更新下载： yarn add --save-dev webpack-dev-server vue.config.json var path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: config

D:\迅雷云盘2\shangyiton\vue-cli\demo>pnpm run Commands available via "pnpm run": serve vue-cli-service serve build vue-cli-service build 解决办法