Vue3 Vite Hot Reload (HMR) 在浏览器中不起作用

Question

我正在使用 vite 开发一个 vue3 项目。HMR 在我的开发环境中无法正常工作。当 vue 文件编辑时，vite 处理更改并通过 websocket 正确发送消息

{"type":"update",
"updates":[{"type":"js-update","timestamp":1669740364450,"path":"/src/views/user/LoginView.vue","explicitImportRequired":false,"acceptedPath":"/src/views/user/LoginView.vue"}]}

但在浏览器中（我尝试了不同的浏览器）什么也没发生。有什么解决办法吗？

我的包.json

{
  "name": "frontendq",
  "private": true,
  "version": "0.9.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@quasar/extras": "^1.15.5",
    "axios": "^1.1.3",
    "moment": "^2.29.4",
    "quasar": "^2.10.2",
    "vue": "^3.2.45",
    "vue-i18n": "9",
    "vue-recaptcha": "^2.0.3",
    "vue-router": "^4.1.6",
    "vue3-cookies": "^1.0.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.2.3",
    "@vitejs/plugin-vue": "^3.2.0",
    "sass": "1.32.12",
    "vite": "^3.2.4"
  },
  "packageManager": "yarn@3.2.4"
}

Answer 1

我一直在使用 Vue 3、TypeScript 和 Vite 4 的项目中处理这个问题。我添加了下一个来vite.config.ts修复热重载：

server: {
  watch: {
    usePolling: true,
  }
},

我的整个vite.config.ts：

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    watch: {
      usePolling: true,
    }
  },
});

添加：

该usePolling设置使 Vite 定期检查文件是否有更改。它在某些环境中非常有用，例如容器、网络文件系统或某些情况下的 Linux 2 的 Windows 子系统，在这些环境中，正常的文件更改检测无法正常工作。然而，正如 Vite 的文档所警告的那样，使用usePolling会让你的 CPU 更加努力地工作：https://vitejs.dev/config/server-options.html#server-watch