修改src文件后Vue开发服务器不编译的问题求助

我是Vue.js新手，折腾了好久都没解决这个问题——用npm run serve启动开发服务器后，修改src目录下的.vue或.js文件，服务器完全没反应，既不编译，终端也没任何输出。只能重启服务器才能看到变更，浏览器刷新也没用。试了各种办法都不行，求帮忙！

vue.config.js 配置 #

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    client: {
      progress: true
    },
    hot: false,
    watchFiles: {
      paths: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.json', 'src/views/*.vue']
    },
    liveReload: true,
  }
})

package.json 配置 #

{
  "name": "product-and-cart",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "nodemon": "^2.0.19",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.54.5",
    "sass-loader": "^13.0.2",
    "webpack": "^5.74.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

jsconfig.json 配置 #

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "jsx": "preserve"
  }
}

babel.config.js 配置 #

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

排查建议 #

• 把vue.config.js里的hot: false改成hot: true，Vue CLI默认开启热模块替换，关闭后可能导致自动更新失效
• 检查系统文件监听限制，部分Linux/macOS系统对监听文件数量有限制，可尝试增大限制值
• 确认编辑器是否开启"安全写入"模式，部分编辑器会先写临时文件再替换，导致服务器监听不到变更
• 删除node_modules和package-lock.json，重新执行npm install后再启动服务
• 简化watchFiles配置，比如改成watchFiles: ['src/**/*']，避免路径匹配遗漏

内容的提问来源于stack exchange，提问作者nlewis99