t06_vue在mac操作系统中热更新失效问题包括cli与vite
<h1 id="1问题原因">1、问题原因</h1><p>用vuecli与vite创建的vue项目，默认是没有热部署更新的。而且查阅大量资料后仍然找不到解决方法</p>
<p>这个我认为是mac的m系列芯片的问题</p>
<p>为什么我会这么认为，因为相同的项目，node_moudules我都没有变过，再win系统中与mac系统同时运行，只有win系统是可以正常热部署的，mac就跟死了一样。这个问题真的是令人抓耳挠腮，浪费了我两台时间没想到就加加几行代码。</p>
<h1 id="2解决方法">2、解决方法</h1>
<h2 id="21-vuecli">2.1 vuecli</h2>
<p>修改 文件</p>
<p>最主要的是添加如下代码：</p>
<pre><code class="language-js">configureWebpack: {
// 根级 watchOptions，作用于所有模块编译
watchOptions: {
poll: 1000, // 轮询间隔 ms
aggregateTimeout: 300, // 防抖时间 ms
ignored: /node_modules/
}
},
</code></pre>
<p>文件完整代码1（根据自己代码选择）：</p>
<pre><code class="language-js">// vue.config.js
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'
}
}
}
</code></pre>
<p>文件完整代码2（根据自己代码选择）：</p>
<pre><code class="language-js">const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
// 根级 watchOptions，作用于所有模块编译
watchOptions: {
poll: 1000, // 轮询间隔 ms
aggregateTimeout: 300, // 防抖时间 ms
ignored: /node_modules/
}
},
})
</code></pre>
<h2 id="22-vue-vite">2.2 vue-vite</h2>
<p>在文件中添加如下监听</p>
<pre><code class="language-js">watch: {
usePolling: true, // 关键点！
}
</code></pre>
<p>文件完整代码</p>
<pre><code class="language-js">import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: ,
server: {
host: '0.0.0.0', // 或 'localhost'
port: 5173,
watch: {
usePolling: true, // 关键点！
}
}
})
</code></pre>
<p>如下：</p>
<p><img src="https://typorals01.oss-cn-hangzhou.aliyuncs.com/test2024image-20250519141556304.png"></p><br><br>
来源：https://www.cnblogs.com/2580p/p/18884193
頁:
[1]