第一步：html代码

<div class="faces-v dis-row" v-if="islogin === false" @click="wxsqlogin">
   <img src="@/assets/images/mine/face.png">
   <label>登录/名称</label>
</div>

第二步js

1、跳转获取code

const wxsqlogin = ()=>{
  let local = encodeURIComponent(window.location.href)
  let wxconfig={
    appid:"xxxx",
    appser:""
  }
  window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + wxconfig.appid 
  + "&redirect_uri=" + local + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
}

//提取code
const getUrlCode=(name)=>{
  return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,''])
  [1].replace(/\+/g,'%20'))||null
  //上面在一行
}

//调取登录接口
const getOpenidAndUserinfo = (code)=>{
  getPublicRequest("api接口地址",{"code":code},'post').then(wx=>{
      if(wx.code === 1){
        userInfo.value = wx.data
        localStorage.setItem('token',wx.data.token)
        localStorage.setItem('user',JSON.stringify(wx.data))
      }else{
        ElMessageBox.alert(wx.msg, '温馨提醒',{confirmButtonText: '关闭', closeOnClickModal:true})
        return false
      }
  })
}

onMounted(()=>{
  if(localStorage.getItem('user')||localStorage.getItem('token')){
    islogin.value = true
    userInfo.value = JSON.parse(localStorage.getItem('user'))
    // console.log(userInfo.value.username)
  }else{
    let code = getUrlCode('code')
    if(code){
      getOpenidAndUserinfo(code)
    }
  }
})

注意：要在微信公众号后台，把回调地址 加上 也就是项目域名