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, // 关键点!
    }
  }
})
相关推荐
李子琪。9 分钟前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf
冰暮流星16 分钟前
javascript之history对象介绍
前端·笔记
IT_陈寒33 分钟前
Vite热更新失灵?你可能漏了这个配置
前端·人工智能·后端
丷丩34 分钟前
MapLibre GL JS第19课:实时更新要素
前端·javascript·gis·map·mapbox·maplibre gl js
Mr.Daozhi37 分钟前
RAG 进阶实战:跑通 Demo 后我连续翻了 6 次车,逐一修复才真正可用(含 Gradio Web 版)
前端·数据库·langchain·大模型·gradio·rag·科研工具
哆来A梦没有口袋1 小时前
干货精讲 | 初级CSS面试高频考题
前端·css·面试
掘金011 小时前
EmbedPDF Vue 版 完整正文文档 全网首发
前端
OpenTiny社区1 小时前
操作ArkTS页面跳转及路由相关心得
前端·typescript·web·opentiny
xiaohua0708day1 小时前
Lodash库
前端·javascript·vue.js
huakoh1 小时前
Claude Code 从零到上手指南:国产工具链复现80% Agent能力,DeepSeek+LangChain实战
前端