Vue 3监听$route的watch为何开发环境正常生产环境不执行？

针对本地开发正常、生产环境监听$route的watch不执行的问题，常见解决思路如下：

1. 改用字符串形式的监听键名 #

生产环境的代码压缩工具（如Terser）可能混淆对象的标识符键名，导致Vue无法识别$route这个内置属性。将监听键名改为字符串形式可避免该问题：

watch: {
  '$route'(to, from) {
    console.log('called within watch');
    // 调用Vuex mutation的代码
  }
}

2. 检查路由复用与组件缓存配置 #

若组件被keep-alive包裹，需排查以下情况：

• 父组件的缓存逻辑导致子组件的watch未正确注册
• 路由跳转属于同一路由的参数变更，但生产环境路由模式（如history）的服务器配置问题导致路由未触发更新

可添加activated生命周期钩子配合验证：

activated() {
  console.log('组件激活，当前路由：', this.$route.path);
}

3. 排查生产环境构建配置 #

检查项目生产构建配置（如vue-cli的vue.config.js或Vite的vite.config.js）：

• 确认Terser等压缩工具是否开启过度的属性名混淆，可添加配置保留Vue相关内置属性名：

  // vue.config.js示例
  module.exports = {
    configureWebpack: {
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              keep_fnames: true,
              keep_classnames: true
            }
          })
        ]
      }
    }
  }
  

4. 验证路由实例的唯一性 #

确保项目仅创建一个VueRouter实例并正确挂载到Vue根实例。多路由实例会导致组件监听的路由对象与实际跳转路由对象不一致，进而无法触发watch。

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