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

1、问题原因

用vuecli与vite创建的vue项目，默认是没有热部署更新的。而且查阅大量资料后仍然找不到解决方法
这个我认为是mac的m系列芯片的问题
为什么我会这么认为，因为相同的项目，node_moudules我都没有变过，再win系统中与mac系统同时运行，只有win系统是可以正常热部署的，mac就跟死了一样。这个问题真的是令人抓耳挠腮，浪费了我两台时间没想到就加加几行代码。
2、解决方法

2.1 vuecli

修改 [vue.config.js]文件
最主要的是添加如下代码：

1. configureWebpack: {
2.   // 根级 watchOptions，作用于所有模块编译
3.   watchOptions: {
4.     poll: 1000,            // 轮询间隔 ms
5.     aggregateTimeout: 300, // 防抖时间 ms
6.     ignored: /node_modules/
7.   }
8. },

复制代码

[vue.config.js]文件完整代码1（根据自己代码选择）：

1. // vue.config.js
2. module.exports = {
3.   // （一）Webpack 编译器监视改动
4.   configureWebpack: {
5.     // 根级 watchOptions，作用于所有模块编译
6.     watchOptions: {
7.       poll: 1000,            // 轮询间隔 ms
8.       aggregateTimeout: 300, // 防抖时间 ms
9.       ignored: /node_modules/
10.     }
11.   },
13.   devServer: {
14.     hot: true,
15.     // （二）静态资源监视（可选）
16.     static: {
17.       watch: true
18.     },
19.     // （三）额外路径监视（可选）
20.     watchFiles: {
21.       paths: ['src/**/*', 'public/**/*'],
22.       options: {
23.         usePolling: false   // 这一项只影响 dev-server 的额外监视，不影响 Webpack 编译
24.       }
25.     },
26.     // 网络 & WS 设置，确保 HMR 客户端能连上
27.     host: '0.0.0.0',
28.     allowedHosts: 'all',
29.     client: {
30.       webSocketURL: 'ws://0.0.0.0:8080/ws'
31.     }
32.   }
33. }

复制代码

[vue.config.js]文件完整代码2（根据自己代码选择）：

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   configureWebpack: {
5.     // 根级 watchOptions，作用于所有模块编译
6.     watchOptions: {
7.       poll: 1000,            // 轮询间隔 ms
8.       aggregateTimeout: 300, // 防抖时间 ms
9.       ignored: /node_modules/
10.     }
11.   },
12. })

复制代码

2.2 vue-vite

在[vue.config.js]文件中添加如下监听

1. watch: {
2.   usePolling: true, // 关键点！
3. }

复制代码

[vue.config.js]文件完整代码

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
4. export default defineConfig({
5.   plugins: [vue()],
6.   server: {
7.     host: '0.0.0.0', // 或 'localhost'
8.     port: 5173,
9.     watch: {
10.       usePolling: true, // 关键点！
11.     }
12.   }
13. })

复制代码

如下：

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！