打包后，在浏览器获取Vue实例

发布于：2025年02月05日

#需求

现在有一个拿不到源码的线上项目，需要通过浏览器获取 vue 实例

然后提前拦截网络请求

#实现

js
// .home是页面根元素的选择器
const instance = document.querySelector('.home').__vue__
 
typeof instance.formInline // 'object'
typeof instance.onSubmit // 'function'

对应的 vue 源码

vue
<script>
export default {
  data() {
    return {
      formInline: {
        user: 'zwh',
        region: 'shanghai',
      },
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
  },
}
</script>

同时在此基础上，也支持属性的双向绑定和 methods 的修改新增

js
instance.onSubmit2 = () => {
  instance.formInline.user = Math.random().toString(32).slice(-4)
}