t06_vue在mac操作系统中热更新失效问题包括cli与vite

1、问题原因

用vuecli与vite创建的vue项目,默认是没有热部署更新的。而且查阅大量资料后仍然找不到解决方法

这个我认为是mac的m系列芯片的问题

为什么我会这么认为,因为相同的项目,node_moudules我都没有变过,再win系统中与mac系统同时运行,只有win系统是可以正常热部署的,mac就跟死了一样。这个问题真的是令人抓耳挠腮,浪费了我两台时间没想到就加加几行代码。

2、解决方法

2.1 vuecli

修改 [vue.config.js]文件

最主要的是添加如下代码:

configureWebpack: 复制代码
  // 根级 watchOptions,作用于所有模块编译
  watchOptions: {
    poll: 1000,            // 轮询间隔 ms
    aggregateTimeout: 300, // 防抖时间 ms
    ignored: /node_modules/
  }
},

vue.config.js\]文件完整代码1(根据自己代码选择): ```// module.exports = { // (一)Webpack 编译器监视改动 configureWebpack: { // 根级 watchOptions,作用于所有模块编译 watchOptions: { poll: 1000, // 轮询间隔 ms aggregateTimeout: 300, // 防抖时间 ms ignored: /node_modules/ } }, devServer: { hot: true, // (二)静态资源监视(可选) static: { watch: true }, // (三)额外路径监视(可选) watchFiles: { paths: ['src/**/*', 'public/**/*'], options: { usePolling: false // 这一项只影响 dev-server 的额外监视,不影响 Webpack 编译 } }, // 网络 & WS 设置,确保 HMR 客户端能连上 host: '0.0.0.0', allowedHosts: 'all', client: { webSocketURL: 'ws://0.0.0.0:8080/ws' } } } ``` \[vue.config.js\]文件完整代码2(根据自己代码选择): ```const module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { // 根级 watchOptions,作用于所有模块编译 watchOptions: { poll: 1000, // 轮询间隔 ms aggregateTimeout: 300, // 防抖时间 ms ignored: /node_modules/ } }, }) ``` ### 2.2 vue-vite 在\[vue.config.js\]文件中添加如下监听 ```watch: usePolling: true, // 关键点! } ``` \[vue.config.js\]文件完整代码 ```import import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { host: '0.0.0.0', // 或 'localhost' port: 5173, watch: { usePolling: true, // 关键点! } } }) ```

相关推荐
给月亮点灯|几秒前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之33 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵3 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式